javascript - 按钮 Bootstrap 的选中状态

Question

我想在 Bootstrap 3.0.2 中为组复选框设置一个选中状态。 docs

html:

<div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
        <input type="checkbox" name="123" data-toggle="button"> <span class="glyphicon glyphicon-star"></span> 123
      </label>
      <label class="btn btn-default">
        <input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456
      </label>
    </div>

但是 data-toggle="button" 不起作用。 jsfiddle

如何解决？谢谢。

Answer 1

要实际检查输入，您需要添加 checked 属性。这实际上不会使它看起来被选中，但如果您在表单中使用它并且实际上希望默认情况下检查输入，则这一点很重要。

<input type="checkbox" name="123" data-toggle="button" checked>

要使其看起来已选中(或按下)，请将类 .active 添加到 .btn 标签中将其包裹起来。

 <label class="btn btn-default active">

http://jsfiddle.net/ZktYG/2/

不确定为什么 data-toggle="buttons" 不起作用。可能与此有关:https://github.com/twbs/bootstrap/issues/8816

目前，您可以通过 JS 实现相同的效果，方法如下:

$('.btn-group').on('input', 'change', function(){
   var checkbox = $(this);
   var label = checkbox.parent('label');
   if (checkbox.is(':checked'))  {
      label.addClass('active');
   }
   else {
      label.removeClass('active');
   }
});