Der beste Weg, um die Schaltfläche in Bootstrap von Twitter zu deaktivieren [duplicate]

Lesezeit: 5 Minuten

Ich bin verwirrt, wenn es darum geht, a zu deaktivieren <button>, <input> oder ein <a> Element mit Klassen: .btn oder .btn-primarymit JavaScript/jQuery.

Dazu habe ich folgendes Snippet verwendet:

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

Also, wenn ich nur die liefere $('button').addClass('btn-disabled'); zu meinem Element wird es visuell als deaktiviert erscheinen, aber die Funktionalität bleibt die gleiche und es wird trotzdem anklickbar sein, so dass es der Grund ist, warum ich das hinzugefügt habe attr und prop Einstellungen zum Element.

Hat jemand das gleiche Problem da draußen abgelaufen? Ist dies der richtige Weg, dies zu tun – während Sie Twitters Bootstrap verwenden?

Könnte bei allen angehängten Ereignissen nach hasclass suchen, aber bei einem href bin ich mir nicht sicher

– Zach Leighton

26. Juni 2013 um 18:24 Uhr
@ZachLeighton – Wenn es um “a” geht, müssen Sie einen Ereignishandler für die Klickaktion bereitstellen

– Benutzer1386320

26. Juni 2013 um 18:26 Uhr
Ich glaube nicht, dass Sie einen Link deaktivieren können.

– Stan

26. Juni 2013 um 18:28 Uhr
Ich habe festgestellt, dass Sie einen Link tatsächlich deaktivieren können, wenn Sie ihn an ein Klickereignis binden und event.preventDefault() aufrufen. Aber es würde mich nicht wundern, wenn das nicht in allen Browsern funktioniert.

– Mike Turley

27. August 2013 um 18:00 Uhr
Dies war kein Duplikat. Das Duplikat, auf das verwiesen wird, deckt nicht den Fall eines “a” href-Elements mit Klassen ab: “btn” oder “btn btn-primary”, wie in der Frage angegeben.

– Schneeleopard

10. Februar 2015 um 23:00 Uhr

Sie brauchen nur die $('button').prop('disabled', true); Teil, die Schaltfläche wird automatisch die deaktivierte Klasse übernehmen.

Funktioniert nicht für Anker, siehe meine Antwort

– Jeroen K

20. August 2013 um 13:02 Uhr
Um auch das Auslösen des Click-Ereignisses zu stoppen, fügen Sie eine Klasse mit hinzu pointer-events: none wie in stackoverflow.com/a/19477318/45525 beschrieben

– Synesso

23. Oktober 2013 um 7:50 Uhr
Fügen Sie diesen Stil zu Ihrem CSS hinzu a[disabled] { pointer-events: none; }

– Ferran Salguero

13. November 2013 um 19:07 Uhr
Ich habe das gerade mit Bootstrap 3 probiert und $('.button').prop('disabled', true); stoppt die Weiterleitung von Klickereignissen, dh Bootstrap erledigt das für Sie.

– Dr. Jan-Philip Gehrcke

25. September 2014 um 15:06 Uhr
Dies funktioniert in meinem Fall nicht.

– Spieler1

25. April 2017 um 19:56 Uhr

Jeroen K

Für Eingabe und Schaltfläche:

$('button').prop('disabled', true);

Für Anker:

$('a').attr('disabled', true);

Eingecheckt in Firefox, Chrom.

Sehen http://jsfiddle.net/czL54/2/

Wenn Sie einen Klick-Handler zu einem deaktivierten Ankerlink hinzufügen, sollte dies nicht funktionieren. Aber in Ihrem bereitgestellten Beispiel wird auch der Click-Handler ausgelöst. jsfiddle.net/76wmpohs

– Ahgindien

19. Mai 2015 um 6:21 Uhr
Dies scheint für Bootstrap 3 ausreichend zu sein. Es scheint, dass Bootstrap etwas tut, um ein BTN so einzustellen, dass es visuell deaktiviert wird, was auch verhindert, dass das Click-Ereignis ausgelöst wird. In reinem jQuery und HTML ohne Bootstrap 3, wie einige der Fiddle-Beispiele, scheint es eine kompliziertere Geschichte zu sein. Aber diese Frage stand im Kontext von Bootstrap.

– Greg

28. Oktober 2015 um 20:54 Uhr

Yarin

Aufbauend auf Jeroenks Antwort ist hier der Überblick:

$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally

$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually + functionally

$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually

Sehen Geige

schönes nachvollziehbares Beispiel! $(‘#button-2’).attr(‘disabled’, ‘disabled’) Funktionierte sowohl für Buttons als auch für Links.

– msanjay

11. Februar 2014 um 14:54 Uhr
@msanjay: Nein – die Geige verwendet Bootstrap 2 und visuell deaktiviert Links/Anker, tut es aber nicht funktionell Deaktivieren Sie sie, wie der Kommentar sagt. Wenn Sie es auf BS3 ändern, werden sie auch funktional deaktiviert.

– EML

2. März 2015 um 17:50 Uhr
EML macht einen wichtigen Punkt. Dass in BootStrap 3 das Setzen des Attributs disabled ausreicht und Bootrap 3 den Rest für Sie erledigt. Aber in jQuery und HTML (ohne Bootstrap 3) reicht das nicht aus.

– Greg

28. Oktober 2015 um 20:56 Uhr

1234567

Der einfachste Weg, dies zu tun, ist die Verwendung von disabled Attribut, wie Sie es in Ihrer ursprünglichen Frage getan hatten:

<button class="btn btn-disabled" disabled>Content of Button</button>

Bis jetzt hat Twitter Bootstrap keine Methode, um die Funktionalität einer Schaltfläche zu deaktivieren, ohne die zu verwenden disabled Attribut.

Nichtsdestotrotz wäre dies eine hervorragende Funktion für sie, die sie in ihre Javascript-Bibliothek implementieren könnten.

Vicky

<div class="bs-example">
      <button class="btn btn-success btn-lg" type="button">Active</button>
      <button class="btn btn-success disabled" type="button">Disabled</button>
</div>

Echte Lösung für die Frage. Kein JQuery erforderlich.

– Web-Entwickler

15. Januar 2015 um 9:11 Uhr
Dies ist eigentlich die richtige Lösung für Bootstrap-Buttons.

– André Lombard

9. Mai 2016 um 12:42 Uhr
funktioniert nicht für Chrom

– Leandro Bardelli

17. November 2016 um 23:45 Uhr
Dies verhindert nicht das Auslösen von Klickereignissen.

– Nathan Arthur

15. Juni 2017 um 19:43 Uhr
Legen Sie disabled=”disabled” fest, um zu verhindern, dass Klickereignisse ausgelöst werden.

– MetalMikester

7. November 2019 um 19:54 Uhr

Schöne

Welches Attribut auch immer dem Button/Anker/Link hinzugefügt wird, um es zu deaktivieren, Bootstrap fügt ihm nur Stil hinzu und der Benutzer kann immer noch darauf klicken, während es noch ein Onclick-Ereignis gibt. Meine einfache Lösung besteht also darin, zu prüfen, ob es deaktiviert ist, und das Onclick-Ereignis zu entfernen/hinzuzufügen:

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

Echte Lösung für die Frage. Kein JQuery erforderlich.

– Web-Entwickler

15. Januar 2015 um 9:11 Uhr
Dies ist eigentlich die richtige Lösung für Bootstrap-Buttons.

– André Lombard

9. Mai 2016 um 12:42 Uhr
funktioniert nicht für Chrom

– Leandro Bardelli

17. November 2016 um 23:45 Uhr
Dies verhindert nicht das Auslösen von Klickereignissen.

– Nathan Arthur

15. Juni 2017 um 19:43 Uhr
Legen Sie disabled=”disabled” fest, um zu verhindern, dass Klickereignisse ausgelöst werden.

– MetalMikester

7. November 2019 um 19:54 Uhr

13111100cookie-checkDer beste Weg, um die Schaltfläche in Bootstrap von Twitter zu deaktivieren [duplicate]

#Abfrage #Javascript #Taste #Twitter-Bootstrap