6

Ich habe eine Schaltfläche Gruppe auf einer Seite, die für eine Auswahl verwendet wird. Nachdem die Auswahl getroffen wurde, möchte ich, dass die Schaltflächengruppe immer noch sichtbar ist, so dass der Benutzer die Auswahl sehen kann, die er getroffen hat, aber ich möchte nicht, dass er sie wieder verwenden kann. Gibt es eine Möglichkeit, die Schaltflächengruppe zu deaktivieren?Twitter Bootstrap Button Group deaktivieren

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

Sie können dies über Javascript oder Jquery tun, aber ich bin neugierig, warum? Was, wenn Menschen ihre Meinung ändern und eine andere auswählen möchten? – Godinall

+0

@Godinall Könnten Sie bitte ein Beispiel geben, wie man es mit Javascript oder Jquery macht? Kann es nicht mit Bootstrap-Tools gemacht werden? Es kann nützlich sein, wenn Sie schreibgeschützte Formulare erstellen möchten. – Baurzhan

Antwort

4

Sie können das disabled-Attribut auf den Tasten verwenden, um ihre Verwendung zu deaktivieren, as described in the Bootstrap docs. Es beinhaltet im Wesentlichen das Hinzufügen des Attributs "deaktiviert" zum Schaltflächenelement, so;

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

Sie jQuery verwenden können dynamisch dieses Attribut hinzufügen, sobald Sie, was Sie

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

Und wenn man wollte tun getan haben wollen, dass es wieder zu aktivieren,

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

Bär Beachten Sie, dass das obige Verhalten dieses Verhalten auf alle Schaltflächengruppen mit diesem Klassennamen anwenden würde. Wenn Sie das nicht möchten, müssen Sie dem btn-Gruppen-div eine ID hinzufügen und diese im jQuery-Selektor verwenden.

+4

Dadurch werden die Schaltflächen deaktiviert, aber ich suche nach einer Möglichkeit, das Design beizubehalten, damit der Benutzer die ausgewählte Schaltfläche sehen kann. – thraxst

+1

@thraxst hast du jemals eine Lösung dafür gefunden? Weil ich nach dem gleichen Ding suche. – Chud37

+0

@ Chud37 und thraxst Versuchen Sie, dies zu Ihrem CSS hinzuzufügen: .btn-primary.active [deaktiviert] {background-color: # e6e6e6! Wichtig; } – THelper

0

Ich wollte auch das Styling halten, also verließ ich das deaktivierte Feld und nur die CSS mit einer neuen Klasse display-only entgegengewirkt:

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

Und die 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); 
} 

.. Scheint gut für mich zu arbeiten.

Verwandte Themen