La meilleure façon de désactiver le bouton dans le Bootstrap de Twitter [dupliquer]
Cette question a déjà une réponse ici:
- Quel est le moyen le plus simple de désactiver / activer les boutons et les liens (jQuery + Bootstrap) 15 réponses
Je suis confus quand il s'agit de la désactivation d'un <button>, <input> ou un <a> élément avec des classes: .btn ou .btn-primary, avec JavaScript/jQuery.
J'ai utilisé un extrait suivant pour faire que:
$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);
Donc, si je fournis simplement le $('button').addClass('btn-disabled'); à mon élément, il apparaîtra comme désactivé, visuellement, mais la fonctionnalité restera la même et il sera néanmoins cliquable, de sorte que c'est la raison pour laquelle j'ai ajouté les paramètres attr et prop à l'élément.
Quelqu'un a-t-il expiré ce même problème? Est-ce la bonne façon de le faire-tout en utilisant le Bootstrap de Twitter?
6 réponses
Vous avez juste besoin de la partie $('button').prop('disabled', true);, le bouton prendra automatiquement la classe désactivée.
Pour l'entrée et le bouton:
$('button').prop('disabled', true);
Pour l'ancre:
$('a').attr('disabled', true);
Vérifié dans firefox, chrome.
Construire la réponse de jeroenk , Voici le résumé:
$('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
Voir violon
La façon La plus simple pour ce faire est d'utiliser le disabled attribut, comme vous l'aviez fait dans votre question initiale:
<button class="btn btn-disabled" disabled>Content of Button</button>
À ce jour, Twitter Bootstrap n'a pas de méthode pour désactiver la fonctionnalité d'un bouton sans utiliser l'attribut disabled.
Néanmoins, ce serait une excellente fonctionnalité pour eux d'implémenter dans leur bibliothèque javascript.
<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>
Quel attribut est ajouté au bouton / ancre / lien pour le désactiver, bootstrap ajoute simplement du style et l'utilisateur pourra toujours cliquer dessus alors qu'il y a encore un événement onclick. Donc, ma solution simple est de vérifier si elle est désactivée et de supprimer / ajouter un événement onclick:
if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');