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

Posted 2023-03-05

【中文标题】引导复选框/单选按钮不会更改 <input> 值

【英文标题】：Bootstrap checkbox/radio buttons do not change <input> value

【发布时间】：2013-08-25 21:25:03

【问题描述】：

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 复选框/单选按钮？

【问题讨论】：

目前他们并没有真正改变它...github.com/twbs/bootstrap/issues/14137

添加属性“name”允许发布复选框数据，如果这是您所希望的。

【参考方案1】：

您似乎错过了“激活”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>

【讨论】：

其实没必要。数据属性会自行触发库。删除演示中的最后一行 JS ($('.btn-group').button())，它仍然有效。

【参考方案2】：

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

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

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

编辑：Firebug screenshot

编辑 2：添加来自 cmets 的文本，因为它似乎很有帮助。

【讨论】：

有趣！我以前没有意识到这种区别。

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

@tomaroo 你上面的评论把我从 3 天的拉头发中救了出来。使用$('input').attr('checked', 'checked'); 而不是$('input').prop('checked', true);。救命稻草！

【参考方案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 引用。