Bootstrap：设置在 HTML 中选中的初始单选按钮

Question

我正在使用 Bootstrap 的 JavaScript 按钮来设置一些单选按钮的样式，但我似乎无法将初始按钮设置为选中状态。

这是我的代码：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info">
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers
  </label>
</div>

第一个按钮有checked="checked"，但它的样式没有被选中。

单击事件后按钮的样式设置为 OK，因此我不确定初始加载时出了什么问题。

Bootply 版本在这里：http://bootply.com/89566

Answer 1

如果您使用的是 HTML 5 文档类型，只需使用 checked 不带任何值：

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

checked="checked" should work as well，所以你必须澄清什么不适合你。

• 在input 上具有checked 属性将确保表单字段的状态正确
• 在label 上添加active 类将设置正确的视觉状态

Reference documentation.

Answer 2

就像 Skelly 提到的，活动类是 Bootstrap 正在切换的，它不查看选中的属性。但是，您不必使用 Javascript...

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

会给你你想要的。

Answer 3

如果您希望 Bootstrap button() 组件最初识别 checked 输入，您需要添加一些 jQuery 之类的......

$('[checked="checked"]').parent().addClass("active");

这会将活动状态设置为组中相应的按钮/标签。