javascript - Bootstrap 复选框/单选按钮不更改 <input> 值

Question

JavaScript page for Bootstrap展示了如何很好地使用按钮来设置复选框和单选字段的样式。例如，对于一个复选框，我可能会写

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
</div>

但是，库实际上并没有改变底层 <input> 的值字段——它只是改变了是否 <label>字段有类 active .我原以为它会改变 checked复选框上的属性。显然我不只是配置错误——这就是 Bootstrap 站点上示例的工作方式。

这实际上是预期的行为吗？如果是这样，它似乎毫无用处，因为人们会想要使用复选框字段。如果没有，我该如何正确配置 Bootstrap 复选框/单选按钮？

Answer 1

输入上的 checked 属性没有被修改，因为这不是复选框输入被选中时发生的变化——checked DOM 属性发生了变化( true 或 false)，Bootstrap 会正确处理这个问题(您可以在 Firebug 中检查元素，并在切换它们时查看 DOM 属性的变化)。 checked 属性仅用于确定最初呈现 DOM 时的默认值。

如果您碰巧用过复选框/单选框来做任何 js/jQuery，请记住这一点!如果您需要以编程方式检查复选框或单选按钮，$('input').attr('checked', 'checked'); 将无法完成工作。 $('input').prop('checked', true); 是您所需要的。

这不是 Bootstrap 按钮的特殊行为，这是所有复选框/ radio 的工作方式。

编辑:Firebug screenshot

编辑 2:添加评论中的文本，因为它似乎很有帮助。