Il modo migliore per disattivare il pulsante in Twitter Bootstrap

Sono confuso quando si tratta di disabilitare un <button>, <input> o un <a> elemento con classi: .btn o .btn-primary, con JavaScript/jQuery.

Ho usato il seguente snippet per farlo:

$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);

Quindi, se fornisco semplicemente il $('button').addClass('btn-disabled'); al mio elemento, apparirà come disabilitato, visivamente, ma la funzionalità rimarrà la stessa e sarà cliccabile comunque, quindi è la ragione per cui ho aggiunto le impostazioni attr e prop all'elemento.

Qualcuno ha sperimentato questo stesso problema? È questo il modo giusto di farlo - mentre si usa Twitter Bootstrap?

Gottlieb Notschnabel
Domanda modificata 2º settembre 2015 в 7:52
Programmazione
javascript button jquery twitter-bootstrap
26º giugno 2013 в 6:23
24 visualizzazioni
Soluzione

Hai solo bisogno della parte $('button').prop('disabled', true);, il pulsante prenderà automaticamente la classe disabled.

Commentari (7)

Il modo più semplice per farlo è usare l'attributo disabled, come avevi fatto nella tua domanda originale:

Content of Button

Per ora, Twitter Bootstrap non ha un metodo per disabilitare la funzionalità di un pulsante senza usare l'attributo disabled.

Tuttavia, questa sarebbe una caratteristica eccellente per loro da implementare nella loro libreria javascript.

1234567
Risposta modificata 26º giugno 2013 в 6:34
Commentari (3)

Qualunque attributo venga aggiunto al pulsante/ancora/link per disabilitarlo, bootstrap sta solo aggiungendo stile ad esso e l'utente sarà ancora in grado di cliccarlo mentre c'è ancora l'evento onclick. Quindi la mia semplice soluzione è controllare se è disabilitato e rimuovere/aggiungere l'evento onclick:

if (!('#button').hasAttr('disabled'))
 $('#button').attr('onclick', 'someFunction();');
else
 $('#button').removeattr('onclick');
Commentari (3)