Question

我有两个有三个选项的无线电组。在每个组中，可以选择一个选项：

    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group-vertical" role="group" data-toggle="buttons">
            <label class="btn btn-default active">
                <input type="radio" name="options" id="option1" autocomplete="off" checked>Radio1
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
            </label>
        </div>
        <div class="btn-group-vertical" role="group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option5" autocomplete="off"> Radio 5
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option6" autocomplete="off"> Radio 6
            </label>
        </div>
    </div>

是否有可能只允许对所有选项进行一次选择？

Answer 1

您可以将每个组中的role="group"和data-toggle="buttons"属性移动到包含您要共享所选内容的所有组的div。

HTML：

<div class="btn-toolbar" role="toolbar">
  <div class="hide-radio" role="group" data-toggle="buttons">
    <div class="btn-group-vertical">
      <label class="btn btn-default active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked="">Radio1
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
      </label>
    </div>
    <div class="btn-group-vertical">
      <label class="btn btn-default">
        <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option5" autocomplete="off"> Radio 5
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option6" autocomplete="off"> Radio 6
      </label>
    </div>
  </div>
</div>

如果你这样做，你需要添加一些CSS来复制bootstrap隐藏无线电输入的方式（我使用了一个新的＆＃39; hide-radio＆＃39;类）。

CSS：

.hide-radio>.btn-group-vertical>.btn input[type=radio] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

实例：http://www.bootply.com/Suguq7eQNb

Answer 2

您还可以为每个收音机添加相同的name属性，除了点击任何收音机外，它将执行您所做的操作，选中的收音机将取消选中。

在Bootstrap 3中单个选择多个无线电组

2 个答案: