Quelle est la façon la plus simple de désactiver / activer les boutons et les liens (jQuery + Bootstrap)

Parfois, j'utilise des ancres conçues comme des boutons et parfois j'utilise simplement des boutons. Je veux désactiver des objets clicky spécifiques afin que:

• Ils ont l'air handicapés
• Ils cessent d'être cliqués

Comment puis-je faire ceci?

Boutons

Les boutons sont simples à désactiver, tout comme disabledune propriété de bouton gérée par le navigateur:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

Pour les désactiver avec une fonction jQuery personnalisée, vous utiliseriez simplement 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);

Bouton JSFiddle désactivé et démo d'entrée .

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

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

Étiquettes d'ancrage

Il convient de noter que ce disabledn'est pas une propriété valide pour les balises d'ancrage. Pour cette raison, Bootstrap utilise le style suivant sur ses .btnéléments:

.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 [disabled]propriété est ciblée ainsi qu'une .disabledclasse. La .disabledclasse est ce qui est nécessaire pour faire apparaître une balise d'ancrage désactivée.

<a href="http://example.com" class="btn">My Link</a>

Bien sûr, cela n'empêchera pas les liens de fonctionner lorsque vous cliquez dessus. Le lien ci-dessus nous amènera à http://example.com . Pour éviter cela, nous pouvons ajouter un simple morceau de code jQuery pour cibler les balises d'ancrage avec la disabledclasse à appeler event.preventDefault():

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

Nous pouvons basculer la disabledclasse 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);

Démo de liaison désactivée JSFiddle .

Combiné

Nous pouvons ensuite étendre la fonction de désactivation précédente effectuée ci-dessus pour vérifier le type d'élément que nous tentons de désactiver à l'aide is(). De cette façon , nous pouvons , toggleClass()si ce n'est pas un inputou buttonélément, ou bascule le disabledsi elle est la propriété:

// 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émo JSFiddle combinée complète .

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

Je ne peux pas penser d'une manière plus simple / plus facile! ;-)

Utilisation de balises d'ancrage (liens):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

Pour activer la balise d'ancrage:

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

Pour désactiver la balise d'ancrage:

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

Supposons que vous ayez un champ de texte et un bouton d'envoi,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Désactivation:

Pour désactiver un bouton, par exemple, soumettre un bouton, il vous suffit d'ajouter un attribut désactivé comme,

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

Après avoir exécuté la ligne ci-dessus, la balise html de votre bouton de soumission ressemblerait à ceci:

<input type="submit" class="btn" value="Submit" disabled/>

Notez que l'attribut «désactivé» a été ajouté .

Activation:

Pour activer le bouton, par exemple lorsque vous avez du texte dans le champ de texte. Vous devrez supprimer l' attribut disable pour activer le bouton comme,

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

Maintenant, le code ci-dessus supprimera l'attribut «désactivé».

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

"Je veux juste désactiver les clicky-choses spécifiques pour que:

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

Cela peut-il être difficile? "

Ils arrêtent de cliquer

1. Pour les boutons aiment <button>ou <input type="button">vous ajoutez l'attribut: disabled.

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. Pour les liens, TOUT lien ... 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 l'état de l'art d'aujourd'hui (5/12/14). Mais nous devons généralement prendre en charge les navigateurs hérités dans le domaine IE, donc IE10 et les versions antérieures NE prennent PAS en charge les événements de pointeur: http://caniuse.com/pointer-events . Donc, utiliser l'une des solutions JavaScript mentionnées par d'autres ici peut être la voie à suivre pour les navigateurs hérités.

Plus d'informations 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és

Évidemment, c'est une réponse CSS, donc:

1. Pour les boutons comme <button>ou <input type="button">utilisez le [attribute]sélecteur:

button[disabled] { ... }

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

-

Voici une démo de base avec les éléments que j'ai mentionnés ici: http://jsfiddle.net/bXm5B/4/

J'espère que cela t'aides.

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

 $("#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, donc je vais adapter son code pour qu'il fonctionne comme j'en ai besoin.

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 disabledpropriété et, s'ils sont définis surtrue , ils auront l'air désactivés (grâce au bootstrap) et ne se déclencheront pas lorsque vous cliquez dessus.

Les ancres ne prennent pas en charge la propriété désactivé, nous allons donc compter sur la .disabledclasse pour les rendre désactivées (grâce au bootstrap à nouveau) et connecter un événement de clic par défaut qui empêche le clic en renvoyant false (pas besoin de preventDefaultvoir ici ) .

Remarque : vous n'avez pas besoin de décrocher cet événement lors de la réactivation des ancres. Il suffit de supprimer la .disabledclasse.

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

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

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

Notez qu'il y a un problème étrange si vous utilisez les boutons JS de Bootstrap et l'état de «chargement». Je ne sais pas pourquoi cela se produit, mais voici comment y remédier.

Disons que vous avez un bouton et que vous le placez dans l'état de chargement:

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

Vous voulez maintenant le retirer de l'état de chargement, mais également 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 ressemble à Bootstrap JS raisonnable:

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 retardée. Vous devrez donc également reporter votre désactivation:

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

Un peu ennuyeux, mais c'est un modèle que j'utilise beaucoup.

Excellente réponse et contributions de tous! J'ai dû étendre légèrement cette fonction pour inclure la désactivation des éléments sélectionnés:

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 buttonwidget jQueryUI , je l'utilise pour les liens et les boutons.

Définissez la balise dans HTML:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

Utilisez jQuery pour initialiser les boutons:

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

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

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

Cela prendra en charge le comportement du bouton et du curseur, mais si vous devez approfondir et modifier le style du bouton lorsqu'il est 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 rappelez-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 assez 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 ajouter un bel effet (par exemple un spinner). J'ai trouvé une excellente bibliothèque qui fait exactement cela:

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

Vous venez d'inclure les css et js requis, ajoutez des propriétés à vos boutons et activez 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

ajustez votre code avec

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

Je sais que ma réponse est en retard, mais OMI, c'est le moyen le plus simple de basculer un bouton «activer» et un 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 ayez ces boutons sur la page comme:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

Le code js:

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

Supposons que vous en ayez un qui soit actuellement activé.

<button id="btnSave" class="btn btn-info">Save</button>

Ajoutez simplement ceci:

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

et vous obtiendrez ce qui désactivera le bouton

<button id="btnSave" class="btn btn-primary" disabled>Save</button>

Si vous souhaitez désactiver le cliquable, vous pouvez également l'ajouter en ligne en html

style="cursor: not-allowed;"