Disabilita gruppo pulsanti di avvio di Twitter

Ho un gruppo di pulsanti in una pagina utilizzata per una selezione. Dopo aver effettuato la selezione, voglio che il gruppo di pulsanti sia ancora visibile in modo che l'utente possa vedere la selezione effettuata, ma non voglio che sia in grado di usarlo più. C'è un modo per disabilitare il gruppo di pulsanti?Disabilita gruppo pulsanti di avvio di Twitter

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

fonte

2014-05-07 thraxst

È possibile farlo tramite javascript o jquery, ma sono curioso del perché? Cosa succede se le persone cambiano idea e vogliono selezionarne un'altra? – Godinall

@Godinall Potresti per favore fare un esempio su come farlo usando javascript o jquery? Non può essere fatto da strumenti di bootstrap? Può essere utile se vuoi fare solo moduli di lettura. – Baurzhan

È possibile utilizzare l'attributo disabled sui pulsanti per disabilitare il loro uso, as described in the Bootstrap docs. Implica essenzialmente l'aggiunta dell'attributo 'disabled' all'elemento button, in questo modo;

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

È possibile utilizzare jQuery per aggiungere dinamicamente questo attributo, una volta che hai fatto tutto quello che si vuole fare

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

E se si voleva riattivarlo

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

Orso tenere presente che quanto sopra applicherà questo comportamento a tutti i gruppi di pulsanti con questo nome di classe. Se non vuoi che sia necessario aggiungere un ID al gruppo btn div e usarlo nel selettore jQuery.

fonte

2014-05-07 12:59:38

Ciò disattiva i pulsanti, ma sto cercando un modo per mantenere anche lo stile in modo che l'utente possa vedere il pulsante selezionato. – thraxst

@thraxst hai mai avuto una soluzione per questo? Perché sto cercando la stessa cosa. – Chud37

@ Chud37 e thraxst Prova ad aggiungere questo al tuo css: .btn-primary.active [disabled] {background-color: # e6e6e6! Important; } – THelper

ho voluto mantenere lo stile troppo, così ho lasciato il campo disattivato e solo contro-agito il CSS con una nuova 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>

E il 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); 
}

.. sembra funzionare bene per me

fonte

2015-11-26 10:36:46 Chud37

Disabilita gruppo pulsanti di avvio di Twitter

risposta

Problemi correlati