21

Bootstrap的JavaScript 页面展示了一些很好的使用按钮来设置复选框和单选字段的样式。例如，对于一个复选框，我可能会写

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

但是，该库实际上并没有改变底层<input>字段的值——它只是改变了该<label>字段是否具有 class active。我原以为它会更改checked复选框上的属性。显然，我不只是将其配置错误——这就是 Bootstrap 站点上的示例的工作方式。

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

4

3 回答 3

38

输入上的checked属性没有被修改，因为这不是在选中复选框输入时发生的变化checked——DOM 属性是变化的（真或假），Bootstrap 会正确处理这个（你可以在 Firebug 中检查元素和切换它们时查看 DOM 属性更改）。该checked属性仅用于在最初渲染 DOM 时确定默认值。

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

这不是 Bootstrap 按钮的特殊行为，这就是所有复选框/收音机的工作方式。

编辑：萤火虫截图

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

于 2013-08-22T23:53:44.170 回答
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>
于 2013-08-22T23:51:22.380 回答
1

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

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

于 2013-09-14T00:21:49.277 回答