Quel est le moyen le plus simple de désactiver / activer les boutons et les liens (jQuery + Bootstrap)

Boutons

Les boutons simples à désactiver car disabled sont une propriété de bouton gérée par le navigateur:

   My Button 

Pour les désactiver avec une fonction jQuery personnalisée, vous devez simplement utiliser fn.extend() :

 // Disable function jQuery.fn.extend({ disable: function(state) { return this.each(function() { this.disabled = state; }); } }); // Disabled with: $('input[type="submit"], input[type="button"], button').disable(true); // Enabled with: $('input[type="submit"], input[type="button"], button').disable(false); 

JSFiddle bouton désactivé et entrée de démonstration .

Sinon, vous utiliseriez la méthode prop() de jQuery:

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

Balises d’ancrage

Il est à noter que disabled n’est pas une propriété valide pour les balises d’ancrage. Pour cette raison, Bootstrap utilise le style suivant sur ses éléments .btn :

 .btn.disabled, .btn[disabled] { cursor: default; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #333; background-color: #E6E6E6; } 

Notez comment la propriété [disabled] est ciblée ainsi qu’une classe .disabled . La classe .disabled est ce qui est nécessaire pour rendre une balise d’ancrage désactivée.

 My Link 

Bien sûr, cela n’empêchera pas les liens de fonctionner lorsqu’ils seront cliqués. Le lien ci-dessus nous amènera à http://example.com . Pour éviter cela, nous pouvons append un code jQuery simple pour cibler les balises d’ancrage avec la classe disabled pour appeler event.preventDefault() :

 $('body').on('click', 'a.disabled', function(event) { event.preventDefault(); }); 

Nous pouvons basculer la classe disabled en utilisant toggleClass() :

 jQuery.fn.extend({ disable: function(state) { return this.each(function() { var $this = $(this); $this.toggleClass('disabled', state); }); } }); // Disabled with: $('a').disable(true); // Enabled with: $('a').disable(false); 

JSFiddle a désactivé la démo du lien .

Combiné

Nous pouvons alors étendre la fonction de désactivation précédente ci-dessus pour vérifier le type d’élément que nous essayons de désactiver en utilisant is() . De cette façon, nous pouvons toggleClass() si ce n’est pas un élément input ou button , ou basculer la propriété disabled si c’est:

 // Extended disable function jQuery.fn.extend({ disable: function(state) { return this.each(function() { var $this = $(this); if($this.is('input, button, textarea, select')) this.disabled = state; else $this.toggleClass('disabled', state); }); } }); // Disabled on all: $('input, button, a').disable(true); // Enabled on all: $('input, button, a').disable(false); 

Démonstration complète de JSFiddle .

Il convient de noter que la fonction ci-dessus fonctionnera également sur tous les types d’entrée.

Je ne peux pas penser à un moyen plus simple / plus facile! 😉

Utilisation de balises d’ancrage (liens):

 Delete 

Pour activer la balise d’ancrage:

  $('#delete').removeClass('disabled'); $('#delete').attr("data-toggle", "modal"); 

Pour désactiver le tag d’ancrage:

  $('#delete').addClass('disabled'); $('#delete').removeAttr('data-toggle'); 

Supposons que vous ayez un champ de texte et un bouton de soumission,

Désactivation:

Pour désactiver un bouton, par exemple, le bouton d’envoi, il vous suffit d’append un atsortingbut

 $('input[type="submit"]').attr('disabled','disabled'); 

Après l’exécution de la ligne ci-dessus, la balise HTML de votre bouton d’envoi ressemblerait à ceci:

Notez que l’atsortingbut ‘disabled’ a été ajouté .

Activation:

Pour activer le bouton, par exemple lorsque vous avez du texte dans un champ de texte. Vous devrez supprimer l’atsortingbut disable pour activer le bouton comme suit:

  if ($('#text-field').val() != '') { $('input[type="submit"]').removeAttr('disabled'); } 

Le code ci-dessus va maintenant supprimer l’atsortingbut “disabled”.

Je sais que je suis en retard à la fête, mais pour répondre spécifiquement aux deux questions:

“Je veux juste désactiver des choses spécifiques de clicky pour que:

• Ils arrêtent de cliquer
• Ils ont l’air handicapé

Comment cela peut-il être difficile? “

Ils arrêtent de cliquer

1. Pour les boutons comme ou vous ajoutez l’atsortingbut: disabled .

 Register  

2. Pour les liens, ANY link … en fait, tout élément HTML, vous pouvez utiliser des événements de pointeur CSS3.

 .selector { pointer-events:none; } 

La prise en charge du navigateur pour les événements de pointeur est impressionnante par rapport à l’état actuel des connaissances (5/12/14). Mais nous devons généralement prendre en charge les navigateurs existants dans IE, donc IE10 et les versions ultérieures NE supportent PAS les événements de pointeur: http://caniuse.com/pointer-events . L’utilisation de l’une des solutions JavaScript mentionnées par d’autres utilisateurs peut donc constituer la voie à suivre pour les navigateurs existants.

Plus d’infos sur les événements de pointeur:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

Ils ont l’air handicapé

De toute évidence, une réponse CSS, donc:

1. Pour les boutons comme ou utilisez le sélecteur [atsortingbute] :

 button[disabled] { ... } input[type=button][disabled] { ... } 

–

Voici une démo de base avec ce que j’ai mentionné ici: http://jsfiddle.net/bXm5B/4/

J’espère que cela t’aides.

Si, comme moi, vous souhaitez simplement désactiver un bouton, ne manquez pas la réponse simple, subtilement cachée dans ce long fil de discussion:

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

@James Donnelly a fourni une réponse complète qui repose sur l’extension de jQuery avec une nouvelle fonction. C’est une excellente idée, alors je vais adapter son code pour qu’il fonctionne comme je le souhaite.

Extension de jQuery

 $.fn.disable=-> setState $(@), true $.fn.enable =-> setState $(@), false $.fn.isDisabled =-> $(@).hasClass 'disabled' setState=($el, state) -> $el.each -> $(@).prop('disabled', state) if $(@).is 'button, input' if state then $(@).addClass('disabled') else $(@).removeClass('disabled') $('body').on('click', 'a.disabled', -> false) 

Usage

 $('.btn-stateful').disable() $('#my-anchor').enable() 

Le code traitera un seul élément ou une liste d’éléments.

Les boutons et les entrées prennent en charge la propriété disabled et, s’ils sont définis sur true , ils seront désactivés (grâce au bootstrap) et ne se déclencheront pas lorsque l’utilisateur cliquera dessus.

Les ancres ne prennent pas en charge la propriété disabled, nous allons donc nous fier à la classe .disabled pour les rendre désactivées (grâce à bootstrap à nouveau) et connecter un événement de clic par défaut qui empêche le clic en renvoyant false (inutile de preventDefault voir ici ).

Remarque : Vous n’avez pas besoin de décrocher cet événement lors de la réactivation des ancres. Supprimer simplement la classe .disabled fait l’affaire.

Bien sûr, cela n’aide pas si vous avez connecté un gestionnaire de clics personnalisé au lien, ce qui est très courant lorsque vous utilisez bootstrap et jQuery. Donc, pour faire face à cela, nous allons utiliser l’extension isDisabled() pour tester la classe .disabled , comme ceci:

 $('#my-anchor').click -> return false if $(@).isDisabled() # do something useful 

J’espère que cela aide un peu à simplifier les choses.

Notez qu’il y a un problème étrange si vous utilisez les boutons JS de Bootstrap et l’état “loading”. Je ne sais pas pourquoi cela se produit, mais voici comment le réparer.

Disons que vous avez un bouton et que vous le définissez à l’état de chargement:

 var myButton = $('#myBootstrapButton'); myButton.button('loading'); 

Maintenant, vous voulez le sortir de l’état de chargement, mais aussi le désactiver (par exemple, le bouton était un bouton Enregistrer, l’état de chargement indiquait une validation en cours et la validation a échoué). Cela semble raisonnable JS Bootstrap:

 myButton.button('reset').prop('disabled', true); // DOES NOT WORK 

Malheureusement, cela réinitialisera le bouton, mais ne le désactivera pas. Apparemment, button() effectue une tâche différée. Vous devrez donc également reporter votre désactivation:

 myButton.button('reset'); setTimeout(function() { myButton.prop('disabled', true); }, 0); 

Un peu agaçant, mais c’est un modèle que j’utilise beaucoup.

Bonne réponse et consortingbutions de tous! J’ai dû étendre cette fonction légèrement pour inclure la désactivation de certains éléments:

 jQuery.fn.extend({ disable: function (state) { return this.each(function () { var $this = jQuery(this); if ($this.is('input, button')) this.disabled = state; else if ($this.is('select') && state) $this.attr('disabled', 'disabled'); else if ($this.is('select') && !state) $this.removeAttr('disabled'); else $this.toggleClass('disabled', state); }); }}); 

Je semble travailler pour moi. Merci a tous!

Pour ce genre de comportement, j’utilise toujours le widget button jQueryUI, je l’utilise pour les liens et les boutons.

Définir la balise dans HTML:

 Sample Button Link Button 

Utilisez jQuery pour initialiser les boutons:

 $("#sampleButton").button(); $("#linkButton").button(); 

Utilisez les méthodes du widget button pour les désactiver / activer:

 $("#sampleButton").button("enable"); //enable the button $("#linkButton").button("disable"); //disable the button 

Cela prendra en compte le comportement du bouton et du curseur, mais si vous devez approfondir et modifier le style du bouton lorsque vous êtes désactivé, remplacez les classes CSS suivantes dans votre fichier de style CSS de page.

 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { background-color:aqua; color:black; } 

Mais souvenez-vous: ces classes CSS (si elles sont modifiées) changeront également le style des autres widgets.

Ce qui suit a très bien fonctionné pour moi:

 $("#button").attr('disabled', 'disabled'); 

C’est une réponse plutôt tardive, mais je suis tombé sur cette question en cherchant un moyen de désactiver les boutons boostrap après avoir cliqué dessus et peut-être append un bel effet (par exemple un spinner). J’ai trouvé une grande bibliothèque qui fait exactement cela:

http://msurguy.github.io/ladda-bootstrap/

Vous venez d’inclure les css et js requirejs, append des propriétés à vos boutons et activer lada avec javascript … Presto! Vos boutons ont une nouvelle vie (veuillez vérifier la démo pour voir à quel point c’est beau)!

Cela ne fonctionne pas parce que parfois

 $(this).attr('checked') == undefined 

ajuster votre code avec

 if(!$(this).attr('checked') || $(this).attr('checked') == false){ 

Je sais que ma réponse est en retard, mais IMO est la façon la plus simple de basculer un bouton “activer” et le bouton “désactiver”

 function toggleButtonState(button){ //If button is enabled, -> Disable if (button.disabled === false) { button.disabled = true; //If button is disabled, -> Enable } else if (button.disabled === true) { button.disabled = false; } } 

Supposons que vous avez ces boutons sur la page comme:

Le code js:

 function change(){ var toenable = document.querySelectorAll(".byBtn"); for (var k in toenable){ toenable[k].removeAtsortingbute("disabled"); } } 

Disons que vous avez cela ressemble à ce qui est actuellement activé.

 Save 

Ajoutez simplement ceci:

 $("#btnSave").prop('disabled', true); 

et vous obtiendrez ce qui désactivera le bouton

 Save