Question

我希望模仿带有引导程序form-group的单选按钮的行为，因此表单中的一行有几个按钮（例如"btn btn-info"），按钮可以“选中”，但在给定时刻只能选择其中一个。

如果我只插入两个input元素，我会得到按钮，但只是按下它们就无法选择。

示例（对我不起作用......）

                    <div class="form-group row">
                        <div class="col-sm-2">
                            <label for="Section" style="text-align:right">Section</label>
                        </div>
                        <div class="col-sm-10">
                            <label align=center>
                                <input class="btn btn-info" name="Section" id="Non-Smoking" value="Non-Smoking">
                            </label>
                            <label>
                                <input class="btn btn-warning" name="Section" id="Smoking" value="Smoking">
                            </label> 
                        </div>
                    </div>

Answer 1

官方网站建议使用bootstrap提供的button.js。

看看这里：getbootstrap.com/javascript/#buttons-checkbox-radio

添加数据切换=＆＃34;按钮＆＃34;到包含复选框或广播的.btn-group 输入以启用各自样式的切换。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked>Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off">Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off">Radio 3
  </label>
</div>

＆＃13;

以上代码段与标准引导程序安装一起使用。

Answer 2

好吧，正如@Wavemaster在评论中回答：答案是： getbootstrap.com/javascript/#buttons-checkbox-radio

如何使用按钮而不是单选按钮创建输入组但仍然只选择其中一个？

2 个答案: