Bedste måde at deaktivere knappen i Twitter's Bootstrap på

Jeg er forvirret, når det drejer sig om at deaktivere et <button>, <input> eller et <a> element med klasserne: .btn eller .btn-primary, med JavaScript/jQuery.

Jeg har brugt følgende snippet til at gøre det:

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

Så hvis jeg bare giver $('button').addClass('btn-disabled'); til mit element, vil det vises som deaktiveret, visuelt, men funktionaliteten vil forblive den samme, og det vil være klikbart alligevel, så det er grunden til, at jeg tilføjede attr og prop indstillingerne til elementet.

Er der nogen der har expirenced dette samme problem derude? Er dette den rigtige måde at gøre dette på - mens man bruger Twitter's Bootstrap?

Løsning

Du skal blot bruge delen $('button').prop('disabled', true);, så vil knappen automatisk tage den handicappede klasse.

Kommentarer (7)

Den nemmeste måde at gøre dette på er at bruge attributten disabled, som du gjorde i dit oprindelige spørgsmål:

Content of Button

På nuværende tidspunkt har Twitter Bootstrap ikke en metode til at deaktivere en knappes funktionalitet uden at bruge attributten disabled.

Ikke desto mindre ville det være en fremragende funktion for dem at implementere i deres javascript-bibliotek.

Kommentarer (3)

Uanset hvilken attribut der tilføjes til knappen/ankeren/linket for at deaktivere den, tilføjer bootstrap bare stil til den, og brugeren vil stadig kunne klikke på den, mens der stadig er onclick-hændelse. Så min enkle løsning er at kontrollere, om den er deaktiveret og fjerne/tilføje onclick-hændelse:

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