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

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

Susan Sarandon

Libérer： 2024-12-12 22:14:14

original

224 Les gens l'ont consulté

How Can I Disable and Enable Buttons and Links Using jQuery and 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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!