web-dev-qa-db-fra.com

Meilleure façon de désactiver le bouton dans le Bootstrapde Twitter sur _

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

J'ai utilisé un extrait suivant pour le faire:

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

Donc, si je ne fais que fournir la $('button').addClass('btn-disabled'); à mon élément, il apparaîtra comme désactivé, visuellement, mais la fonctionnalité restera la même et le clic sera cliquable, de sorte que ce sera la raison pour laquelle j'ai ajouté le attr et prop paramètres de l'élément.

Quelqu'un at-il expirencé ce même problème? Est-ce la bonne façon de faire cela en utilisant le logiciel Bootstrap de Twitter?

javascriptjquerybuttontwitter-bootstrap
252
user1386320

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

318
Samuel Robert

Pour la saisie et le bouton:

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

Pour l'ancre:

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

Vérifié dans firefox, chrome.

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

114
Jeroen K

Construire à partir de réponse de jeroenk , voici le récapitulatif:

$('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

83
Yarin

Pour ce faire, le moyen le plus simple consiste à utiliser l'attribut disabled, comme vous l'avez fait dans votre question initiale:

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

Pour l'instant, 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é à implémenter dans leur bibliothèque javascript.

33
1234567
<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>
29
Vicky