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?
Il modo più semplice per farlo è usare l'attributo disabled
, come avevi fatto nella tua domanda originale:
<button class="btn btn-disabled" disabled>Content of Button</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.
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');