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

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

Désactiver ou activer les éléments cliquables (boutons et liens) sur votre Les pages Web peuvent être essentielles pour contrôler les interactions des utilisateurs et offrir une expérience transparente. Voici un guide complet pour réaliser cette tâche sans effort à l'aide de jQuery et Bootstrap :

Désactivation des boutons

Les boutons sont intrinsèquement plus faciles à désactiver à l'aide de la propriété désactivée, un attribut largement pris en charge dans navigateurs :

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

Vous pouvez également créer une fonction jQuery personnalisée pour les boutons à l'aide de fn.extend() méthode :

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

$('input[type="submit"], input[type="button"], button').disable(true);

Désactivation des liens

Les balises d'ancrage ne prennent pas en charge la propriété désactivée. Cependant, Bootstrap propose une classe .disabled pour obtenir l'apparence désactivée souhaitée. Pour éviter de cliquer, vous pouvez utiliser event.preventDefault() :

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

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

Combiner la gestion des boutons et des liens

Pour simplifier votre code et gérer les deux boutons et des liens, vous pouvez étendre la fonction de désactivation :

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

$('input, button, a').disable(true);

Cette fonction vérifie le type d'élément et applique la technique de désactivation appropriée, y compris .disabled pour les liens et désactivé pour les boutons et autres éléments de formulaire.

En mettant en œuvre ces techniques, vous pouvez désactiver ou activer de manière transparente tout type d'élément cliquable sur votre page, améliorant ainsi l'expérience utilisateur et les fonctionnalités du site Web.

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!