Pré-activer un bouton dans le groupe btn de Bootstrap?

Je voudrais mettre un bouton sélectionné dans le Bootstrap est btn-group:

<div class="btn-toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
  <button type="button" class="btn btn-default">7</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">8</button>
 </div>
</div>

Comment puis-je pré-sélectionnez l'option 5? Cette réponse suggère que je peux ajouter active classe pour le bouton, qui fonctionne en effet au départ, mais ensuite cliquer sur les autres boutons de ne pas désactiver ce bouton, que je m'attends.

Ici est un violon: http://bootply.com/90490

Voici une autre de jouer avec le active classe appliquée, en montrant pourquoi il n'est pas la bonne solution: http://bootply.com/90491 - cliquez sur l'un des autres boutons, et le bouton 5 reste toujours actif.

source d'informationauteur Richard

  1. 15

    En supposant que vous souhaitez qu'il y ait une seule sélection par groupe de boutons et que vous avez inclus le fichier JavaScript de bootstrap, les opérations suivantes doivent travailler.

    Balisage

    <div class="btn-toolbar">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
    </div>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
    </div>
</div>

    JavaScript

    $(document).ready(function() {
    $(".btn").first().button("toggle");
});

    Si vous voulez, par exemple, pré-basculer le troisième bouton, vous pouvez utiliser la tranche de la fonction comme ceci:

    $(".btn").slice(2,3).button("toggle");

    Vous pouvez également attribuer des identifiants pour les boutons.

    Voici mon violon: http://bootply.com/90501

  2. 7

    Je cherchais une réponse à la pré-activer un bouton et trouvé ce SI. Ils semblaient tous un peu difficile et j'ai trouvé un lien pour BootStrap 4 case à cocher boutons qui m'a donné quelques conseils sur la façon de BootStrap 3 œuvres. Ma solution est, je pense, est plus simple car il peut être pré-écrite dans le code html. La solution est ci-dessous:

    <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" checked>5
    </label>
    <label class="btn btn-default">
        <input type="radio">6
    </label>
    <label class="btn btn-default">
        <input type="radio">7
    </label>
</div>

    Comme je l'ai dit, cela a été invité par BootStrap 4 docs mais fonctionne sur BootStrap 3. Les pièces importantes sont:

    1. La data-toggle="buttons" dans le btn-group div.
    2. La active classe sur l'étiquette 5.
    3. La checked sur le <input type="radio"> pour 5.

    J'espère que cela aide les autres.