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

Désactivation et activation des boutons et des liens à l'aide de jQuery et Bootstrap

Parfois, vous devez empêcher l'utilisateur de cliquer sur des boutons ou des liens spécifiques et leur donner une apparence désactivée. Voici comment y parvenir en utilisant jQuery et Bootstrap :

Boutons

Les boutons en HTML ont un attribut "désactivé" intégré, ce qui facilite leur désactivation :

<button class="btn" disabled>Disabled Button</button>

Pour désactiver les boutons avec une fonction jQuery personnalisée, étendez leurs fonctionnalités avec la méthode Disable() :

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

$('button').disable(true); // Disable buttons
$('button').disable(false); // Enable buttons

Anchor Tags

Désactivé n'est pas un attribut valide pour les balises d'ancrage (). Au lieu de cela, Bootstrap stylise les éléments avec la classe .btn.disabled pour les faire apparaître désactivés.

<a href="#" class="btn disabled">Disabled Link</a>

Pour empêcher les liens de fonctionner lorsqu'ils sont désactivés, utilisez jQuery pour intercepter les clics :

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

Approche combinée

Vous pouvez étendre la fonction Disable() pour gérer les entrées, les boutons et liens :

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

Cela permet de désactiver tous les éléments cliquables avec une seule ligne de code :

$('input, button, a').disable(true); // Disable all clickable elements
$('input, button, a').disable(false); // Enable all clickable elements

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!