Comment désactiver et activer facilement les boutons et les liens à l'aide de jQuery et Bootstrap ?

Comment désactiver/activer sans effort les boutons et les liens avec jQuery Bootstrap

Comprendre le problème

Parfois, vous pouvez rencontrer situations dans lesquelles vous souhaitez empêcher les utilisateurs d’interagir avec certains boutons ou liens. Cela implique à la fois d'indiquer visuellement leur état désactivé et d'empêcher tout événement de clic.

Solution pour les boutons

Désactivez les boutons de manière transparente en manipulant leur propriété désactivée :

<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 une fonction de désactivation jQuery personnalisée :

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

Désactiver : $('input[type="submit"], input[type="button"], bouton').disable(true);
Activer : $('input[type="submit"], input[type ="button"], button').disable(false);

Solution pour les balises d'ancrage (liens)

Les balises d'ancrage n'ont pas une propriété désactivée, mais Bootstrap gère cela avec un style CSS. De plus, nous pouvons incorporer jQuery pour empêcher les liens de fonctionner lorsqu'ils sont désactivés :

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    color: #333;
    background-color: #E6E6E6;
}

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

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

Désactiver : $('a').disable(true);
Activer : $( 'a').disable(false);

Solution combinée

Combinaison Avec les approches ci-dessus, nous pouvons étendre la fonction de désactivation pour vérifier le type d'élément et gérer la désactivation en conséquence :

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ésactiver tout : $('input, button, a').disable(true);
Activer tout : $('input, bouton, a').disable(false);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!