jQuery 按钮 Bootstrap 的检查状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19891400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checked state for buttons Bootstrap
提问by tim
I want to have a checked state for group chexboxes in Bootstrap 3.0.2. docs
我想在 Bootstrap 3.0.2 中为 group chexboxes 设置一个选中状态。文档
html:
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>
But data-toggle="button"doesnt works. jsfiddle
但data-toggle="button"不起作用。提琴手
How to fix it? Thanks.
如何解决？谢谢。
回答by Michelle
To actually check the input, you will need to add the checked property. This will not actually make it appearchecked, but is important if you are using this in a form and actually want the input to be checked by default.
要实际检查输入，您需要添加 checked 属性。这实际上不会使它看起来被选中，但如果您在表单中使用它并且实际上希望默认情况下检查输入，这很重要。
<input type="checkbox" name="123" data-toggle="button" checked>
To make it lookchecked (or pressed), add class .activeto the .btnlabel wrapping it.
为了使它看起来被选中（或按下），将类添加.active到.btn包装它的标签中。
<label class="btn btn-default active">
Not sure why data-toggle="buttons"isn't working. Could be related to this: https://github.com/twbs/bootstrap/issues/8816
不知道为什么data-toggle="buttons"不起作用。可能与此有关：https: //github.com/twbs/bootstrap/issues/8816
For now, you can achieve the same effect through JS by doing something like:
现在，您可以通过执行以下操作通过 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');
}
});
回答by Austin Hanson
It's been a couple of years; however, I wanted to address the actual problem above of why the data-toggle="button" wasn't working.
已经有几年了；但是，我想解决上面的实际问题，即为什么 data-toggle="button" 不起作用。
The answer was to remove the data-toggle="button" on the <input>'s.
答案是删除 <input> 上的 data-toggle="button"。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123"> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> 456
</label>
</div>
回答by Jeff Beagley
I solved this by making a custom attribute that housed whether it was active or not, then setting that value within JQuery's click event.
我通过创建一个自定义属性来解决这个问题，该属性包含它是否处于活动状态，然后在 JQuery 的单击事件中设置该值。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active check_button" id="check1">
<input type="checkbox" autocomplete="off" checked data-checked=true> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary check_button" id="check2">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 2
</label>
<label class="btn btn-primary check_button" id="check3">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 3
</label>
</div>
You can see a working example of this within the fiddle, https://jsfiddle.net/jeffbeagley/DTcHh/34024/
您可以在小提琴中看到一个工作示例， https://jsfiddle.net/jeffbeagley/DTcHh/34024/
