Question

我看到Bootstrap单选按钮（使用data-toggle =“buttons”创建）更改事件会在标签之间切换活动类，并且不会影响选中真实单选按钮的属性。这是正常的行为还是我有错？

或者，如何将活动类别的标签和已检查属性相互绑定双向，以便它们同时改变？

示例代码：

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

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

此致

Answer 2

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

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

Bootstrap data-toggle =“buttons”无线电检查属性

2 个答案: