引导复选框/单选按钮不改变<输入>价值

Bootstrap checkbox/radio buttons do not change <input> value

本文关键字：lt gt 价值 输入 改变 复选框 单选按钮      更新时间：2023-09-26

Bootstrap的JavaScript页面显示了一些按钮对复选框和单选字段进行样式设置的好方法。例如，对于一个复选框，我可能会写

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
</div>

但是，库实际上并没有更改底层<input>字段的值——它只是更改<label>字段是否具有类active。我本以为它会更改复选框上的checked属性。显然，我并没有误解它——Bootstrap网站上的例子就是这样工作的。

这真的是预期的行为吗？如果是这样的话，这似乎相当无用，因为人们会想要使用复选框字段。如果没有，如何正确配置引导复选框/单选按钮？

输入上的checked属性不会被修改，因为当复选框输入被选中时，它不会发生变化——checked DOM属性会发生变化（true或false），Bootstrap会正确处理这一点（您可以在Firebug中检查元素，并在切换它们时查看DOM属性的变化）。checked属性仅用于在最初渲染DOM时确定默认值。

如果你碰巧用复选框/单选框做任何js/jQuery，请记住这一点！如果您需要以程序方式选中复选框或单选按钮，$('input').attr('checked', 'checked');将无法完成任务。$('input').prop('checked', true);正是您所需要的。

这不是引导按钮的特殊行为，这是所有复选框/单选框的工作方式。

编辑：Firebug屏幕截图

编辑2：添加了评论中的文本，因为这似乎很有帮助。

您似乎错过了一个"激活"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>

我为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");
            }            
        }

最后，不要忘记添加bootstrap js引用。

相关文章：