Quelle est la manière la plus facile de désactiver / activer des boutons et des liens (jQuery + Bootstrap)

Question

Parfois, j'utilise des ancres stylisées comme des boutons et parfois j'utilise simplement des boutons. Je veux désactiver des éléments cliquables spécifiques afin que :

• Ils aient un aspect désactivé
• Ils ne puissent plus être cliqués

Comment puis-je faire cela ?

Answer 1

Boutons

Les boutons sont simples à désactiver car désactivé est une propriété du bouton qui est gérée par le navigateur :

Mon Bouton

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

// Fonction de désactivation
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Désactivé avec :
$('input[type="submit"], input[type="button"], button').disable(true);

// Activé avec :
$('input[type="submit"], input[type="button"], button').disable(false);

Démo de bouton et input désactivés JSFiddle.

Autrement, vous pouvez utiliser la méthode prop() de jQuery :

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

---

Balises d'Ancre

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

.btn.désactivé, .btn[désactivé] {
    curseur : par défaut;
    image d'arrière-plan : aucune;
    opacité : 0.65;
    filtre : alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    couleur : #333;
    couleur de fond : #E6E6E6;
}

Remarquez comment la propriété [désactivé] est ciblée ainsi qu'une classe .désactivé. La classe .désactivé est nécessaire pour rendre une balise d'ancre désactivée.

Mon Lien

Bien sûr, cela n'empêchera pas les liens de fonctionner lorsqu'ils sont cliqués. Le lien ci-dessus nous dirigera vers http://exemple.com. Pour éviter cela, nous pouvons ajouter un simple morceau de code jQuery pour cibler les balises d'ancre avec la classe désactivé pour appeler event.preventDefault() :

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

Nous pouvons activer/désactiver la classe désactivé en utilisant toggleClass() :

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Désactivé avec :
$('a').disable(true);

// Activé avec :
$('a').disable(false);

Démo de lien désactivé JSFiddle.

---

Combiné

Nous pouvons ensuite étendre la fonction de désactivation précédente pour vérifier le type d'élément que nous essayons de désactiver en utilisant is(). De cette manière, nous pouvons utiliser toggleClass() s'il ne s'agit pas d'un élément input ou button, ou basculer la propriété désactivé si c'est le cas :

// Fonction de désactivation étendue
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);
        });
    }
});

// Désactivé sur tout :
$('input, button, a').disable(true);

// Activé sur tout :
$('input, button, a').disable(false);

Démo JSFiddle complète combinée.

Il convient de noter que la fonction ci-dessus fonctionnera également pour tous les types d'input.

Answer 2

Je ne peux pas penser à un moyen plus simple / plus facile! ;-)

---

Utilisation des balises d'ancre (liens) :

Supprimer

---

Pour activer la balise d'ancre :

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

---

Pour désactiver la balise d'ancre :

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

Answer 3

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 cliquables spécifiques pour que :

• Ils arrêtent de cliquer
• Ils aient l'air désactivés

À quel point cela peut-il être difficile?"

Ils arrêtent de cliquer

1. Pour les boutons comme ou vous ajoutez l'attribut : disabled.

Inscription

2. Pour les liens, N'IMPORTE quel lien... en fait, n'importe quel élément HTML, vous pouvez utiliser les événements pointeurs CSS3.

.sélecteur { pointer-events:none; }

La prise en charge des événements pointeurs par les navigateurs est impressionnante de nos jours (12 mai 2014). Mais nous devons généralement prendre en charge les anciens navigateurs dans l'univers IE, donc IE10 et les versions inférieures NE prennent PAS en charge les événements pointeurs: http://caniuse.com/pointer-events. Donc l'utilisation de l'une des solutions JavaScript mentionnées par d'autres ici pourrait être la meilleure solution pour les anciens navigateurs.

Plus d'informations sur les événements pointeurs :

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

Ils ont l'air désactivés

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

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

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 vous aidera.

Answer 4

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

Utilisation

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

Le code traitera un élément unique ou une liste d'éléments.

Les boutons et les champs de saisie prennent en charge la propriété disabled et, si elle est définie sur true, ils auront l'air désactivés (grâce à bootstrap) et ne se déclencheront pas lorsqu'ils sont cliqués.

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

Remarque : Vous n'avez pas besoin de dissocier cet événement lorsque vous réactivez les ancres. Il suffit de supprimer la classe .disabled.

Bien sûr, cela ne fonctionnera pas si vous avez attaché un gestionnaire de clic personnalisé au lien, quelque chose de très courant lorsque vous utilisez bootstrap et jQuery. Pour gérer cela, nous allons utiliser l'extension isDisabled() pour vérifier la classe .disabled, comme ceci :

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # faire quelque chose d'utile

J'espère que cela simplifie un peu les choses.

Answer 5

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

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);
    });
}});

Semble fonctionner pour moi. Merci à tous!