Question

JavaScript page for Bootstrap显示了一些很好用的按钮来设置复选框和无线电字段的样式。例如，对于复选框，我可能会写

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

但是，该库实际上并未更改基础<input>字段的值 - 它只会更改<label>字段是否具有类active。我原以为它会更改复选框上的checked属性。显然我不只是错误配置 - 这是Bootstrap网站上的示例工作方式。

这实际上是预期的行为吗？如果是这样，它似乎相当无用，因为人们想要使用复选框字段。如果没有，我该如何正确配置Bootstrap复选框/单选按钮？

Answer 1

输入中的checked属性未被修改，因为在选中复选框输入时不会更改 - checked DOM属性发生更改（true或false），并且Bootstrap正确处理（您可以检查Firebug中的元素，并在切换时查看DOM属性更改）。 checked属性仅用于在最初呈现DOM时确定默认值。

如果您碰巧使用复选框/无线电做任何js / jQuery，请记住这一点！如果您需要以编程方式检查复选框或单选按钮，$('input').attr('checked', 'checked');将无法完成工作。 $('input').prop('checked', true);就是您所需要的。

这不是Bootstrap按钮的特殊行为，这是所有复选框/无线电的工作方式。

修改：Firebug screenshot

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

Answer 2

您似乎错过了“激活”btn-group（documentation）的电话。以下是a demo的工作原理：

<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>

Answer 3

我正在为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 refence。

Bootstrap复选框/单选按钮不会更改<input />值

3 个答案: