Bootstrap : comment désactiver un bouton et un lien en jQuery ?
Avec le framework Bootstrap et JQuery, il est possible de désactiver des boutons mais aussi des liens.
Désactiver des boutons et des inputs est facile, car ils possèdent un attribut qui le fait : l'attribut "disabled". Pour désactiver un élément, il suffit donc d'utiliser la méthode prop() de JQuery qui fixe la valeur d'une propriété :
$("input, button").prop("disabled", true);
On peut également utiliser la fonction de jQuery
fn.extend(), qui permet de créer une fonction qui sera intégrée
à JQuery, pour pouvoir facilement l'utiliser après :
jQuery.fn.extend({
disable: function(etat) {
return this.each(function() {
this.disabled = etat;
});
}
});
// Désactive les boutons par l'appel de la fonction
$('input, button').disable(true);
Il est plus difficile de désactiver un lien, car il ne possède pas d'attribut "disabled". Le rajouter ne fonctionnera pas. Bootstrap possède une classe "disabled" pour les boutons (ils ont tous la classe "btn" dans le framework) :
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #333;
background-color: #E6E6E6;
}
Pour qu'il paraisse désactivé, il faudra donc que le lien possède déjà la classe "btn", et lui ajouter la classe "disabled". Mais même s'il a l'apparence d'un élément désactivé, il est toujours actif. Pour le désactiver, on développe une fonction qui empêche le clic pour les liens ayant la classe "disabled" :
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Avec la fonction toggleClass de JQuery, on peut ajouter une classe ou l'enlever. Cette méthode prend en deuxième paramètre un booléen qui indique si l'on ajoute ou on enlève le nom de la classe. Il est donc possible de combiner cette fonction avec la fonction "disable" que l'on a écrite plus haut. Pour que la fonction détecte si c'est un bouton ou un lien, on utilise la méthode "is()" de JQuery.
// Création de la fonction disabled
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
//On détecte si l'objet est un bouton ou un lien
if($this.is('input, button'))
//C'est un bouton
this.disabled = state;
else
//Si c'est un lien, on ajoute ou on enlève la classe "disabled"
$this.toggleClass('disabled', state);
});
}
});
// Désactive tous les éléments
$('input, button, a').disable(true);
// Active tous les éléments
$('input, button, a').disable(false);