Beste måten å deaktivere knappen i Twitter's Bootstrap på

Jeg er forvirret når det gjelder å deaktivere et <button>, <input> eller et <a> element med klassene: .btn eller .btn-primary, med JavaScript/jQuery.

Jeg har brukt følgende utdrag for å gjøre det:

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

Så, hvis jeg bare gir $('button').addClass('btn-disabled'); til elementet mitt, vil det vises som deaktivert, visuelt, men funksjonaliteten vil forbli den samme og den vil være klikkbar likevel, så det er grunnen til at jeg la til attr og prop innstillingene til elementet.

Har noen opplevd det samme problemet der ute? Er dette den riktige måten å gjøre dette på - mens du bruker Twitter' s Bootstrap?

Løsning

Du trenger bare delen $('button').prop('disabled', true);, så får knappen automatisk klassen disabled.

Kommentarer (7)

Den enkleste måten å gjøre dette på er å bruke attributtet disabled, slik du gjorde i det opprinnelige spørsmålet:

Content of Button.

Foreløpig har ikke Twitter Bootstrap noen metode for å deaktivere en knapps funksjonalitet uten å bruke disabled-attributtet.

Ikke desto mindre ville dette være en utmerket funksjon for dem å implementere i javascript-biblioteket.

Kommentarer (3)

Uansett hvilket attributt som legges til knappen / ankeret / lenken for å deaktivere den, legger bootstrap bare stil til den, og brukeren vil fortsatt kunne klikke på den mens det fortsatt er onclick-hendelse. Så min enkle løsning er å sjekke om den er deaktivert og fjerne / legge til onclick-hendelse:

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