Ο καλύτερος τρόπος για να απενεργοποιήσετε το κουμπί στο Twitter's Bootstrap

Έχω μπερδευτεί όταν πρόκειται για την απενεργοποίηση ενός στοιχείου <button>, <input> ή ενός στοιχείου <a> με κλάσεις: .btn ή .btn-primary, με JavaScript/jQuery.

Χρησιμοποίησα το ακόλουθο απόσπασμα για να το κάνω αυτό:

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

Έτσι, αν απλά δώσω το $('button').addClass('btn-disabled'); στο στοιχείο μου, θα εμφανίζεται ως απενεργοποιημένο, οπτικά, αλλά η λειτουργικότητα θα παραμείνει η ίδια και θα μπορεί να γίνει κλικ παρ' όλα αυτά, οπότε αυτός είναι ο λόγος για τον οποίο πρόσθεσα τις ρυθμίσεις attr και prop στο στοιχείο.

Έχει διαπιστώσει κανείς το ίδιο πρόβλημα εκεί έξω; Είναι αυτός ο σωστός τρόπος για να το κάνετε αυτό - ενώ χρησιμοποιείτε το Twitter's Bootstrap;

Λύση

Χρειάζεστε μόνο το μέρος $('button').prop('disabled', true);, το κουμπί θα πάρει αυτόματα την κλάση disabled.

Σχόλια (7)

Ο ευκολότερος τρόπος για να το κάνετε αυτό, είναι να χρησιμοποιήσετε το χαρακτηριστικό disabled, όπως κάνατε στην αρχική σας ερώτηση:

Περιεχόμενο του κουμπιού

Μέχρι στιγμής, το Twitter Bootstrap δεν διαθέτει μέθοδο για την απενεργοποίηση της λειτουργικότητας ενός κουμπιού χωρίς τη χρήση του χαρακτηριστικού disabled.

Παρ' όλα αυτά, αυτό θα ήταν ένα εξαιρετικό χαρακτηριστικό που θα μπορούσαν να εφαρμόσουν στη βιβλιοθήκη javascript τους.

Σχόλια (3)

Όποιο χαρακτηριστικό και αν προστεθεί στο κουμπί/άγκυρα/σύνδεσμο για να το απενεργοποιήσετε, το bootstrap απλά προσθέτει στυλ σε αυτό και ο χρήστης θα εξακολουθεί να είναι σε θέση να το πατήσει, ενώ υπάρχει ακόμα το συμβάν onclick. Έτσι, η απλή μου λύση είναι να ελέγξω αν είναι απενεργοποιημένο και να αφαιρέσω/προσθέσω το συμβάν onclick:

if (!('#button').hasAttr('disabled'))
 $('#button').attr('onclick', 'someFunction();');
else
 $('#button').removeattr('onclick');
Σχόλια (3)