Meilleure façon de désactiver un bouton dans Bootstrap de Twitter

Question

Je suis confus lorsqu'il s'agit de désactiver un élément "bouton", "input" ou "a" avec les classes : "btn" ou "btn btn-primary", avec JavaScript/jQuery.

J'ai utilisé l'extrait suivant pour ce faire :

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

Donc, si je fournis juste 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, c'est la raison pour laquelle j'ai ajouté l'élément attr y prop à l'élément.

Quelqu'un a-t-il rencontré le même problème ? Est-ce la bonne façon de procéder - en utilisant le Bootstrap de Twitter ?

Answer 1

Vous avez juste besoin du $('button').prop('disabled', true); le bouton prendra automatiquement la classe désactivée.

Answer 2

Pour l'entrée et le bouton :

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

Pour l'ancrage :

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

Vérifié dans firefox, chrome.

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

Answer 3

Bâtiment hors 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

Answer 4

La manière la plus simple de le faire est d'utiliser la fonction disabled comme vous l'aviez fait dans votre question initiale :

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

À l'heure actuelle, Twitter Bootstrap ne dispose pas d'une méthode permettant de désactiver la fonctionnalité d'un bouton sans utiliser l'attribut disabled attribut.

Néanmoins, ce serait une excellente fonctionnalité à implémenter dans leur bibliothèque javascript.

Answer 5

<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>

En savoir plus sur le bouton bootstrap Boutons Bootstrap 3.0