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>

Smalto

Is this issue was fixed?. Because me also having same issues.. – Shellieshellproof

Answer 1

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

Striate

Having the name attributes not sharing the same name break radio button group's toggle behavior. – Wrand

Edit to my previous comment: even the original docs you're copying from (either 3.4 or 4.1) are both having name="options"! – Wrand

Answer 2

If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the .

https://v4-alpha.getbootstrap.com/components/buttons/#toggle-states

Bridgeport