检查按钮Bootstrap的状态

Question

我想在Bootstrap 3.0.2中为组chexbox提供一个检查状态.文档

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

现在,您可以通过执行以下操作来实现相同的效果:

$('.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');
   }
});