自举按钮群独立工作

Question

我的网页上有一个按钮条，它是用引导器制作的。

我有一套三个按钮然后两个按钮。前三项需要独立。我可以选一、二、三种。第二组两项工作的要求是，如果其中一项被选中，另一组则不是。

前三个功能不起作用，我不知道为什么。它们是不同id的独立按钮组

有什么想法吗？以下是代码：

<div class="row" style="margin-top: -4px;">
<div class="col-xs-9" style="padding-right: 0px;">
    <div class="col-xs-4" style="padding: 0px;">
        <div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Open now</button>
              </div>
        </div>
    </div>
    <div class="col-xs-4" style="padding: 0px;">
        <div id="freeOnlyBtn" class="btn-group btn-group-justified" role="group" aria-label="2">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Free only</button>
              </div>
        </div>
    </div>
    <div class="col-xs-4" style="padding: 0px;">
        <div id="18PlusBtn" class="btn-group btn-group-justified" role="group" aria-label="3">

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">18+</button>
              </div>
         </div>      
    </div>
</div>
<div class="col-xs-3" style="padding-left: 0px;">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-info"><i class="fa fa-th" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-info"><i class="fa fa-list" style="padding-top: 3px; padding-bottom: 3px;"></i></button>
      </div>
    </div>
</div>

​

Answer 1

您可以使用：复选框表示multiple，无线电输入表示单个。

<div class="container-fluid">
    <div class="col-xs-9">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="checkbox" autocomplete="off" checked>Open now</label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off">Free only</label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off">+18</label>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option2" autocomplete="off">On</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" autocomplete="off">Off</label>
        </div>
    </div>
</div>

Answer 2

这样如何，用下面的复选框替换按钮上的显示文本：

发自：

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-primary">Open now</button>
              </div>
        </div>

至：

<div id="openNowBtn" class="btn-group btn-group-justified" role="group" aria-label="1"  data-toggle="buttons">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-primary">
        <input type="checkbox" autocomplete="off" checked>Display Text
    </button>
      </div>
</div>

为我工作！