Bootstrap 3 按钮组

Question

**引导程序 3

我正在尝试使每组按钮组都独一无二，但不同的组相互干扰

<label>Payment Mode</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
  <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>

<label>Payment Period</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Immediate</button>
  <button type="button" class="btn btn-default"> More Than 1 day</button>
</div>

我如何让它在自己的组中保持唯一性

Answer 1

您可能希望使用 Bootstrap 提供的单选按钮组 (http://getbootstrap.com/javascript/#buttons)，然后使用 reset 方法清除其他组..

HTML：

<label>Payment Mode</label>
  <div id="mode-group" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="mode" id="option1"> Cash / Cheque / Bank Transfer
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="mode" id="option2"> JobsBuddy Disbursement
    </label>
  </div>

  <label>Payment Period</label>
  <div id="period-group" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="period" id="period1"> Immediate
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="period" id="period2"> More Than 1 day
    </label>
  </div>

jQuery：

// unselect period when mode is selected
$("#mode-group .btn").on('click',function(){

  $("#period-group").button('reset');

});

演示：http://bootply.com/86422

Answer 2

单击 btn-group 中的按钮不会设置（活动）类。该按钮获得不同的背景颜色，因为它被聚焦（：focus）。单击不同 btn-group 中的按钮会将焦点设置到该按钮。

使用类似的方法为每个 btn-group 设置一个活动类：

$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});

Answer 3

如果您使用 AngularJS，Angular UI bootstrap 有一个很好的解决方案。

基本上使用 btnRadio 指令执行以下操作。

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

Answer 4

要保持唯一按钮，请不要使用 class="btn-group"：

<label>Payment Mode</label>
 <div>
    <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
    <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
 </div>

 <label>Payment Period</label>
 <div>
      <button type="button" class="btn btn-default">Immediate</button>
     <button type="button" class="btn btn-default"> More Than 1 day</button>
 </div>

这个类用于一系列按钮。查看Buttons Group的文档

Answer 5

只是为了简化它以供下一个人查看，这是来自 Bootstrap 网站的解决方案代码：

<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>

基本上，您将标签设置为按钮并将选项编码为常规单选按钮，以将一组选项与另一组分开。