Bootstrap 3 Groupes De Bouton

**Bootstrap 3

J'essaie de faire de chaque groupe de bouton unique, mais les différents groupes sont interférer 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 faire en sorte qu'il est unique dans son propre groupe

Définir interfering with each other
que voulez-vous dire ?
Signifie que lorsque je clique sur le bouton sur le mode de paiement,puis cliquez sur un bouton de la période de paiement, le mode de paiement obtient désactivée
l'utilisation du nom de domaine? Une radio en HTML désélectionner tout ce qui avait le même "nom".

OriginalL'auteur CodeGuru | 2013-10-08

16

Vous pouvez utiliser le Bootstrap fourni bouton radio groupes (http://getbootstrap.com/javascript/#buttons), puis utilisez la reset méthode pour effacer 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

merci , en fait je n'ai pas besoin de remise à zéro , juste besoin de chaque groupe pour être unique, je vais modifier en conséquence et la tester, merci !
Cela ne fonctionne pas pour moi, je suis assez étonné que cela fonctionne pour vous sur le lien de démonstration, parce que j'ai tout essayé et un bouton-groupe en conflit avec un autre bouton-groupe. Cela se produit également dans le bootstrap page de doc. j'ai essayé d'ajouter des id dans btn-groupes, mais sans succès 🙁
Ce n'est pas la réponse de l'utilisateur en question. Le même problème se pose dans cet exemple: si vous sélectionnez un bouton de la Période de Paiement du groupe, en cliquant sur un bouton sur le Mode de Paiement sera décocher, et vice-versa, de plus, l'utilisateur n'est pas disposé à utiliser un autre type de bouton.

OriginalL'auteur Zim
4

Cliquez sur le bouton dans le btn-group n'est pas défini (active) de la classe. Le bouton devient une autre couleur d'arrière-plan parce qu'il est concentré (:). En cliquant sur un bouton dans une autre btn-group définit le focus sur ce bouton.

Utiliser quelque chose comme cela pour définir une classe active par btn-group:
```
$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});
```
OriginalL'auteur Bass Jobsen

Si vous êtes en utilisant AngularJS la Angulaire UI bootstrap a une excellente solution.

Fondamentalement, effectuez les opérations suivantes à l'aide de la 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>

OriginalL'auteur Ty Danielson

-1

De garder le bouton unique il suffit de ne pas utiliser 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>
```
Cette classe est utilisée pour les séries de boutons. Vérifier la documentation de Groupe De Boutons

j'ai essayé, ça ne fonctionne pas :X Désolé >.<
je ne peux pas l'air de trouver plus de ceux de la classe paste.laravel.com/XkQ ma source complet. Merci d'avance 😡
enfait les groupes dans la documentation des conflits les uns des autres
C'est totalement faux. Retrait de la btn-group classe ne résout pas le problème (tous les boutons, indépendamment de leur groupe, interfèrent les uns avec les autres, c'est, chaque bouton agit comme appartenant au même groupe), en plus des pauses le style des boutons. Merci de ne pas faire de up inutile "réponses".

OriginalL'auteur Norbert Pisz
-1

Juste pour le simplifier pour la prochaine personne à venir à la recherche, voici la solution code à partir du fichier d'amorce site 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>
```
Fondamentalement, vous style les étiquettes des boutons de code et les options que régulièrement des boutons radio pour séparer un ensemble d'options à partir de l'autre.

L'utilisateur n'est pas à l'aide de boutons radio. Ce qui rend cette réponse totalement inutile. Par exemple, il est invalide si vous essayez d'utiliser justifiée des groupes de boutons.
Comment pourrait-on définir un groupe qui a des options mutuellement exclusives? Je pensais que c'était le point de boutons radio, que vous ne pouvez choisir l'un d'eux.
Ouais, c'est le point de boutons radio. Mais l'utilisateur n'est PAS à l'aide de boutons radio. Vous pouvez également obtenir le même résultat avec une liste d'options, mais je doute qu'il serait à peine utile pour cet utilisateur.
Oh. Mon hypothèse était que, même si il n'était pas à l'aide de boutons radio actuellement, qui allait être le moyen d'obtenir les fonctionnalités qu'il était après. Je vais laisser ma réponse en tout cas, parce que je pense que c'est une hypothèse raisonnable.

OriginalL'auteur Pete Considine

Vous devez vous connecter pour publier un commentaire.