web-dev-qa-db-fra.com

Groupes de boutons Bootstrap 3

** Bootstrap 3

J'essaie de rendre chaque groupe de boutons unique, mais les différents groupes interfèrent les uns avec les autres 

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

Comment puis-je le garder unique dans son propre groupe

htmltwitter-bootstraptwitter-bootstrap-3
13
CodeGuru

Vous souhaiterez peut-être utiliser les groupes bouton radio fournis par Bootstrap ( http://getbootstrap.com/javascript/#buttons ), puis la méthode reset pour supprimer l'autre groupe ..

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');

});

Démo: http://bootply.com/86422

16
Zim

Cliquez sur le bouton dans le groupe btn pour ne pas définir de classe (active). Le bouton prend une couleur de fond différente car il est focalisé (: focus). En cliquant sur un bouton dans un autre groupe, le focus est mis sur ce bouton.

Utilisez quelque chose comme ceci pour définir une classe active par btn-groupe:

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

Si vous utilisez AngularJS, l'interface utilisateur Angular bootstrap a une excellente solution.

En gros, procédez comme suit en utilisant la directive 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>
0
Ty Danielson