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-group のボタンをクリックすると、そのボタンにフォーカスが設定されます。

次のようなものを使用して、btn-group ごとにアクティブなクラスを設定します。

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

AngularJS を使用している場合、Angular UI ブートストラップには優れたソリューションがあります。

基本的には 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>
于 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 Web サイトのソリューション コードを次に示します。

<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 に答える