Έχω μπερδευτεί όταν πρόκειται για την απενεργοποίηση ενός στοιχείου <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.
Ο ευκολότερος τρόπος για να το κάνετε αυτό, είναι να χρησιμοποιήσετε το χαρακτηριστικό disabled
, όπως κάνατε στην αρχική σας ερώτηση:
<button class="btn btn-disabled" disabled>Περιεχόμενο του κουμπιού</button>
Μέχρι στιγμής, το Twitter Bootstrap δεν διαθέτει μέθοδο για την απενεργοποίηση της λειτουργικότητας ενός κουμπιού χωρίς τη χρήση του χαρακτηριστικού disabled
.
Παρ' όλα αυτά, αυτό θα ήταν ένα εξαιρετικό χαρακτηριστικό που θα μπορούσαν να εφαρμόσουν στη βιβλιοθήκη javascript τους.
Όποιο χαρακτηριστικό και αν προστεθεί στο κουμπί/άγκυρα/σύνδεσμο για να το απενεργοποιήσετε, το bootstrap απλά προσθέτει στυλ σε αυτό και ο χρήστης θα εξακολουθεί να είναι σε θέση να το πατήσει, ενώ υπάρχει ακόμα το συμβάν onclick. Έτσι, η απλή μου λύση είναι να ελέγξω αν είναι απενεργοποιημένο και να αφαιρέσω/προσθέσω το συμβάν onclick:
if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');