Html Bootstrap 复选框/单选按钮不会改变 <input> 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18392450/
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
Bootstrap checkbox/radio buttons do not change <input> value
提问by jameshfisher
The JavaScript page for Bootstrapshows some nice use of buttons to style checkboxes and radio fields. For example, for a checkbox, I might write
Bootstrap的JavaScript 页面展示了一些很好地使用按钮来设置复选框和单选字段的样式。例如，对于复选框，我可能会写
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
</div>
However, the library doesn't actually change the value of the underlying <input>field -- it just changes whether the <label>field has class active. I would have expected it to change the checkedattribute on the checkbox. Apparently I don't just have it misconfigured -- this is the way the examples on the Bootstrap site work.
然而，库实际上并没有改变底层<input>字段的值——它只是改变了该<label>字段是否具有 class active。我原以为它会更改checked复选框上的属性。显然，我不仅仅是配置错误——这就是 Bootstrap 站点上的示例的工作方式。
Is this actually expected behavior? If so, it seems fairly useless, as people are going to want to use the checkbox field. If not, how do I properly configure Bootstrap checkboxes/radio buttons?
这实际上是预期的行为吗？如果是这样，这似乎没什么用，因为人们会想要使用复选框字段。如果没有，我该如何正确配置 Bootstrap 复选框/单选按钮？
回答by tomaroo
The checkedattribute on the input isn't modified because that isn't what changes when a checkbox input is checked -- the checkedDOM property is what changes (true or false), and Bootstrap handles this properly (you can inspect the element in Firebug and see the DOM property change when you toggle them). The checkedattribute is only used to determine default value when the DOM is initially rendered.
该checked输入属性没有修改，因为这不是什么时，一个复选框输入被选中变化- checkedDOM属性是什么样的变化（true或false）和Bootstrap处理这个正确（您可以检查在Firebug的元素，切换它们时会看到 DOM 属性的变化）。该checked属性仅用于确定初始呈现 DOM 时的默认值。
If you ever happen to be doing any js/jQuery with checkboxes/radios, remember this! If you need to programatically check a checkbox or radio button, $('input').attr('checked', 'checked');will not get the job done. $('input').prop('checked', true);is what you need.
如果您碰巧使用复选框/收音机做任何 js/jQuery，请记住这一点！如果您需要以编程方式选中复选框或单选按钮，$('input').attr('checked', 'checked');将无法完成工作。$('input').prop('checked', true);是你所需要的。
This isn't special behavior for Bootstrap buttons, this is how all checkbox/radios work.
这不是 Bootstrap 按钮的特殊行为，这就是所有复选框/收音机的工作方式。
Edit: Firebug screenshot
编辑：萤火虫截图
Edit 2: Added text from the comments, as it seems to be helpful.
编辑 2：从评论中添加文本，因为它似乎有帮助。
回答by Jason Sperske
It looks like you are missing a call to "activate" the btn-group(documentation). Here is a demoof this working:
看起来您错过了“激活” btn-group（文档）的调用。这是这项工作的演示：
<form id='testForm'>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name='Option' value='1' />Option 1</label>
</div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>
<script>
$('#actionSubmit').on('click', function (e) {
e.preventDefault();
alert($('#testForm').serialize());
});
$('.btn-group').button();
</script>
回答by Sanchitos
I am doing it like this for MVC.NET in case anyone needs it:
我正在为 MVC.NET 这样做，以防有人需要它：
@{
var removeSelected = Model.Remove == true ? "active" : "";
var buttonText = Model.Remove == true ? "Add" : "Remove";
}
@Html.HiddenFor(model => model.Remove)
<div class="editor-field">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" id="RemoveButton" class="btn btn-primary @removeSelected" onclick="toggle();">@buttonText</button>
</div
</div>
function toggle() {
var value = $("#Remove").val();
if (value == "False") {
$("#Remove").val("True");
$("#RemoveButton").text("Add");
}
else {
$("#Remove").val("False");
$("#RemoveButton").text("Remove");
}
}
And finally don't forget to add the bootstrap js refence.
最后不要忘记添加 bootstrap js 引用。
