按钮的检查状态引导 [英] Checked state for buttons Bootstrap

问题描述

我想在Bootstrap 3.0.2中检查组chexboxes的状态。 文档

I want to have a checked state for group chexboxes in 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

如何解决？感谢。

推荐答案

要实际检查输入，您需要添加checked属性。这实际上不会使其显示已选中，但如果您在表单中使用此选项，并且实际上希望默认选中该输入，则非常重要。

To actually check the input, you will need to add the checked property. This will not actually make it appear checked, but is important if you are using this in a form and actually want the input to be checked by default.

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

要检查 c $ c> .active 到 .btn 包装它的标签。

To make it look checked (or pressed), add class .active to the .btn label wrapping it.

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

http： //jsfiddle.net/ZktYG/2/

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

Not sure why data-toggle="buttons" isn't working. Could be related to this: https://github.com/twbs/bootstrap/issues/8816

现在，您可以通过执行以下操作，通过JS实现相同的效果：

For now, you can achieve the same effect through JS by doing something like:

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

这篇关于按钮的检查状态引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！