Bootstrap data-toggle="buttons" radio checked property

Question

I see that the Bootstrap radio buttons (created with data-toggle="buttons") change event switches the active class between the labels and does no effect on the checked properties of the real radio buttons. Is that a normal behaviour or do I have a mistake?

Or, how can I bind this active class of label and checked property of the radio each other in two-way so that they change at the same time?

Example Code:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Is this issue was fixed?. Because me also having same issues.. — Thangadurai

deimon deimon · Accepted Answer · 2017-04-25T23:37:31

Check this code

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options1" id="option1" autocomplete="off"> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options2" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options3" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Regards

Bootstrap data-toggle="buttons" radio checked property

2 Answers