Désactiver Twitter Bootstrap Groupe De Boutons

J'ai un groupe de boutons sur une page qui est utilisé pour une sélection. Après la sélection se fait je veux que le bouton de groupe à toujours être visible de sorte que l'utilisateur peut voir la sélection ils ont fait, mais je n'en voulez pas être en mesure de l'utiliser plus. Est-il un moyen de désactiver le bouton de groupe?

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary btn-lg">Option 1</button>
    <button type="button" class="btn btn-primary btn-lg">Option 2</button>
    <button type="button" class="btn btn-primary btn-lg">Option 3</button>
</div>
  • Vous pouvez le faire à l'aide de javascript ou jquery, mais je suis curieux de savoir pourquoi? Que faire si les gens à changer leur esprit et que vous voulez sélectionner un autre?
  • Pourriez-vous nous donner un exemple de comment le faire à l'aide de javascript ou jquery? Ne peut-il pas être fait par bootstrap outils? Il peut être utile si vous voulez faire lire seulement les formes.
  • Bootstrap JS outillage est jQuery
InformationsquelleAutor thraxst | 2014-05-07
  1. 7

    Vous pouvez utiliser le désactivé attribut sur les boutons pour désactiver leur utilisation, comme décrit dans le Bootstrap docs. Il porte essentiellement sur l'ajout de l'attribut "désactivé" pour l'élément de bouton, comme;

    <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 1</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 2</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 3</button>
</div>

    Vous pouvez utiliser jQuery pour ajouter dynamiquement cet attribut une fois que vous avez fait tout ce que vous voulez faire

    $('.btn-group-vertical button').attr('disabled','disabled');

    Et si vous voulez réactiver

    $('.btn-group-vertical button').removeAttr('disabled');

    Garder à l'esprit que ce qui précède s'applique ce comportement à tous les groupes de bouton avec le nom de cette classe. Si vous ne voulez pas que vous aurez besoin d'ajouter un ID à l'btn groupe de div et de l'utiliser dans le sélecteur jQuery.

    • Cela ne désactivez les boutons, mais je suis à la recherche d'un moyen de garder le style en tant que bien de sorte que l'utilisateur peut voir le bouton de la ils ont choisi.
    • avez-vous jamais arriver à une solution pour cela? Parce que je suis à la recherche de la même chose.
    • et thraxst Essayez d'ajouter ceci dans votre css: .btn-primary.active[désactivé] { background-color: #e6e6e6 !important; }
    • que faire si insted de btn-groupe de boutons que vous utilisez un div qui définit btn btn-group et utilise également data-toggle="buttons" puis utiliser des étiquettes comme de véritables boutons. lors de la désactivation de définir ensemble div qui ne bascule à attr('data-toggle','off') qui semble fonctionner et conserve les couleurs, vous preset sur elle
    InformationsquelleAutor Rob Quincey
  2. 3

    Je voulais garder le style trop, Alors j'ai abandonné le champ désactivé et juste contre-agi de la CSS avec une nouvelle classe display-only:

    <div class='btn-group display-only' data-toggle='buttons'>      
    <label class='btn btn-default button-array'>Friday PM</label>
    <label class='btn btn-default button-array'>Saturday AM</label>
    <label class='btn btn-default button-array'>Graduation</label>
    <label class='btn btn-default button-array'>Saturday PM</label>
    <label class='btn btn-default button-array'>Sunday AM</label>
    <label class='btn btn-default button-array'>Sunday PM</label>
    <label class='btn btn-default button-array'>Monday AM</label>
</div>

    Et le CSS:

    .btn-group.display-only label.btn {
    pointer-events: none;
    cursor: not-allowed;
}
.btn-group.display-only label.btn.active {
    opacity: 1;
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

    ..Semble bien fonctionner pour moi.

    InformationsquelleAutor Chud37
  3. 1

    Avant de v4.0.0, Bootstrap boutons ne font pas honneur .handicapés ou [désactivé] :

    https://github.com/twbs/bootstrap/issues/21237

    InformationsquelleAutor Timothé DELION