13

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

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

4

5 回答 5

17

您可能希望使用 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

于 2013-10-08T18:53:22.917 回答
4

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

使用类似这样的方法为每个 btn 组设置一个活动类：

$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});
于 2013-10-08T16:55:47.497 回答
0

If you are using AngularJS the Angular UI bootstrap has a great solution.

Basically do the following using the btnRadio directive.

<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>
于 2014-09-26T14:01:33.397 回答
-1

要保持唯一按钮，请不要使用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>

此类用于一系列按钮。检查按钮组的文档

于 2013-10-08T11:22:50.580 回答
-1

只是为了简化它以便下一个人来寻找，这里是来自 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>

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

于 2016-02-15T21:24:01.303 回答