Question

** Bootstrap 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中的按钮不会设置（活动）类。该按钮获得不同的背景颜色，因为它被聚焦（：焦点）。单击其他btn组中的按钮可将焦点设置为此按钮。

使用类似的方法为每个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>

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

Bootstrap 3按钮组

5 个答案: