Bootstrap data-toggle="buttons" 单选属性答案

【问题标题】：Bootstrap data-toggle="buttons" radio checked propertyBootstrap data-toggle="buttons" 单选属性
【发布时间】：2015-12-04 13:01:07
【问题描述】：

我看到 Bootstrap 单选按钮（使用 data-toggle="buttons" 创建）change 事件在标签之间切换 active 类，并且对检查真正的单选按钮的属性。这是正常行为还是我有错误？

或者，我怎样才能将这个 active 标签类和无线电的 checked 属性双向绑定，以便它们同时改变？

示例代码：

<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>

【问题讨论】：

这个问题解决了吗？因为我也有同样的问题..

标签： twitter-bootstrap radio-button onchange

【解决方案1】：

检查此代码

<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>

问候

【讨论】：

name 属性不共享同名会破坏单选按钮组的切换行为。
编辑我之前的评论：即使是您复制的原始文档（3.4 或 4.1）都具有name="options"！

【解决方案2】：

如果您要预先切换按钮，则必须手动将 .active 类和 aria-pressed="true" 添加到 .

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

【讨论】：