Bootstrap 3 btn-group Lose Active Class when Click any where on the Page

user_2426488 0
Viewed 43450

CAn you please take a look at following Demo and let me know why btn-group is loosing Active class whenever I click any where on the page. I was expecting the btn-group toggle only between each other? did I do any thing wrong here?

<div class="container">
    <div class="well">
        <div class="btn-group">
            <button type="button" class="btn btn-default" id="regi1">Left</button>
            <button type="button" class="btn btn-default" id="regi2">Middle</button>
            <button type="button" class="btn btn-default" id="regi3">Right</button>
        </div>
     </div>
</div>
twitter-bootstrap-3 twitter-bootstrap focus javascript
2 Answers

I came here looking for an Angular solution. The ng-class is what prevents the deselection on blur.

<div class="btn-group">
  <label class="btn btn-outline-warning"
        ng-class="o.value == myinput.selected_value? 'active':''"
        ng-repeat="o in options">
    <input type="radio"
        autocomplete="off" 
        ng-value="{{o.value}}"
        ng-model="myinput.selected_value">
    {{o.value)}}
  </label>
</div>
user_23880050
Related