Question

所以这是我的标记

      <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="account-type" id="optionsRadios1" value="1"> <span class="glyphicon glyphicon-user"></span>
User</label>
    <label class="btn btn-primary active">
        <input type="radio" name="account-type" id="optionsRadios2" value="2" checked> <span class="glyphicon glyphicon-eye-open"></span>
Special user</label>
    <label class="btn btn-primary">
        <input type="radio" name="account-type" id="optionsRadios2" value="3"> <span class="glyphicon glyphicon-home"></span>
Agency</label>
</div>

它渲染一切正常，问题是，如果我选择值3，它不会将第三个单选按钮标记为已选中，或者如果我选择它将任何其他选项标记，所以当我提交表单时，它不会我选择哪个选项，默认选中的选项，将被提交。

任何提示？

Answer 1

有人指出，你的第三个单选按钮ID是错误的。

但那不是问题所在：

真正的问题是你在引导程序之后加载jQueryUi（我猜）。这是一个众所周知的'bug'。只需在引导程序之前加载jQueryUi，一切都会正常运行

Answer 2

可能是因为这两个单选按钮具有相同的ID

  <input type="radio" name="account-type" id="optionsRadios2" value="2" checked>

  <input type="radio" name="account-type" id="optionsRadios2" value="3">

将最后一项更改为id="optionsRadios3"

Answer 3

Btn-group是一个类属性，它不会改变表单的行为。当您需要从3个相互排斥的单选按钮中进行选择时，您应该对所有单选按钮使用相同的名称属性，而不是单独的ID。我还猜你的标签围绕着这些单选按钮，我们只看到你代码的一部分，对吧？

请查看this page以了解有关它的更多信息。

Bootstrap btn-group不会更改单选按钮

3 个答案: