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

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

La simplification du processus de désactivation et d'activation des boutons et des liens améliore l'expérience utilisateur et maintient le contrôle au sein des applications Web . Cet article explore diverses techniques pour obtenir cette fonctionnalité à l'aide de jQuery et Bootstrap.

Désactivation des boutons

Les boutons en HTML et Bootstrap peuvent être facilement désactivés en utilisant l'attribut désactivé, qui est géré de manière native par les navigateurs. Pour désactiver les boutons à l'aide de jQuery, vous pouvez utiliser la méthode fn.extend() et créer une fonction Disable() personnalisée.

De plus, la méthode prop() de jQuery peut être utilisée pour désactiver les boutons :

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

Désactivation des balises d'ancrage

Les balises d'ancrage n'ont pas nativement l'attribut désactivé. Cependant, Bootstrap utilise CSS pour styliser les balises d'ancrage désactivées avec la classe .disabled. Cette classe est appliquée pour fournir une apparence désactivée.

Pour empêcher les clics sur les balises d'ancrage désactivées, jQuery peut être utilisé :

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

Fonction de désactivation combinée

Pour gérer les deux boutons et balises d'ancrage de manière efficace, une fonction désactivée modifiée peut être créée à l'aide de la méthode is() de jQuery pour différencier les types d'éléments :

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

Ceci La fonction étendue Disable() permet une gestion cohérente de tous les éléments cibles, garantissant que les boutons et les balises d'ancrage peuvent être désactivés et activés dynamiquement.

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!