Bootstrap复选框/单选按钮无法改变<input>值

Question

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 网站上的示例的工作方式。

这实际上是期望的行为吗？如果是，那么似乎相当无用，因为人们将想要使用复选框字段。如果不是，那么如何正确配置 Bootstrap 复选框/单选按钮？

- jameshfisher

---

目前他们还没有真正地进行更改... https://github.com/twbs/bootstrap/issues/14137 - Kolyunya

添加一个属性“name”可以让复选框数据被POST，如果这是你所期望的。 - RatherBKnitting

Answer 1

标签上的checked属性不会被修改，因为当选中复选框时改变的不是它，而是checked DOM属性（true或false）。Bootstrap会正确处理这个属性（您可以在Firebug中检查元素，在切换时看到DOM属性的更改）。checked属性仅用于确定DOM最初呈现时的默认值。

如果您以后需要使用复选框/单选按钮的js/jQuery，请记住这一点！如果您需要通过编程方式选中复选框或单选按钮，则无法使用$('input').attr('checked', 'checked');。您需要使用$('input').prop('checked', true);来完成任务。

这不是Bootstrap按钮的特殊行为，这是所有复选框/单选按钮的工作原理。

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

- tomaroo

---

有趣！我之前没有意识到这个区别。 - jameshfisher

如果你需要在处理复选框/单选框的js/jQuery代码中编程勾选复选框或单选框，记住这个要点！使用$('input').attr('checked', 'checked')不能实现目标。你需要使用$('input').prop('checked', true)。 - tomaroo

@tomaroo，你上面的评论让我从为期3天的抓狂中解脱了出来。我一直在使用$('input').attr('checked', 'checked');而不是$('input').prop('checked', true);。真是救命稻草！ - suo

如何在普通的JavaScript中获取选中状态？ - undefined

@BillyMitchell document.getElementById("checkbox").checked https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript - undefined

Answer 2

看起来您忘记调用"activate"函数来激活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>

- Jason Sperske

---

其实这并不必要。数据属性会自动触发库。在你的演示中删除最后一行JS代码($('.btn-group').button())，它仍然可以工作。 - colllin

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 引用。

- Sanchitos