html - Bootstrap 3按钮组

**引导程序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>

我如何在自己的团队中保持它的独特性

最佳答案

您可能希望使用引导程序提供的单选按钮组（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