Beste manier om knop in Twitter's Bootstrap uit te schakelen

Ik ben in de war als het gaat om het uitschakelen van een <button>, <input> of een <a> element met classes: .btn of .btn-primary, met JavaScript/jQuery.

Ik heb de volgende snippet gebruikt om dat te doen:

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

Dus, als ik gewoon de $('button').addClass('btn-disabled'); aan mijn element toevoeg, zal het visueel als uitgeschakeld verschijnen, maar de functionaliteit zal hetzelfde blijven en het zal niettemin klikbaar zijn, dus dat is de reden waarom ik de attr en prop instellingen aan het element heb toegevoegd.

Heeft iemand ditzelfde probleem al eens ondervonden? Is dit de juiste manier om dit te doen - terwijl je Twitter's Bootstrap gebruikt?

Gottlieb Notschnabel
Bewerkte vraag 2de2 september 2015 в 7:52
Programmering
javascript button jquery twitter-bootstrap
26ste2 juni 2013 в 6:23
20 views
Oplossing

Je hebt alleen het $('button').prop('disabled', true); gedeelte nodig, de knop zal automatisch de disabled class aannemen.

Commentaren (7)

De eenvoudigste manier om dit te doen, is om het disabled attribuut te gebruiken, zoals je in je oorspronkelijke vraag had gedaan:

Inhoud van Button

Op dit moment heeft Twitter Bootstrap geen methode om de functionaliteit van een knop uit te schakelen zonder het disabled attribuut te gebruiken.

Desalniettemin, zou dit een uitstekende functie voor hen zijn om in hun javascript bibliotheek te implementeren.

1234567
Bewerkt antwoord 26ste2 juni 2013 в 6:34
Commentaren (3)

Welk attribuut ook wordt toegevoegd aan de knop/anker/link om het uit te schakelen, bootstrap voegt er gewoon stijl aan toe en de gebruiker zal er nog steeds op kunnen klikken zolang er nog onclick event is. Dus mijn eenvoudige oplossing is om te controleren of het is uitgeschakeld en verwijderen / toevoegen van onclick event:

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