Boutons
Les boutons sont simples à désactiver, tout comme disabledune propriété de bouton gérée par le navigateur:
<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>
Pour les désactiver avec une fonction jQuery personnalisée, vous utiliseriez simplement fn.extend():
// Disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
this.disabled = state;
});
}
});
// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);
// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);
Bouton JSFiddle désactivé et démo d'entrée .
Sinon, vous utiliseriez la prop()méthode de jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Étiquettes d'ancrage
Il convient de noter que ce disabledn'est pas une propriété valide pour les balises d'ancrage. Pour cette raison, Bootstrap utilise le style suivant sur ses .btnéléments:
.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;
}
Notez comment la [disabled]propriété est ciblée ainsi qu'une .disabledclasse. La .disabledclasse est ce qui est nécessaire pour faire apparaître une balise d'ancrage désactivée.
<a href="http://example.com" class="btn">My Link</a>
Bien sûr, cela n'empêchera pas les liens de fonctionner lorsque vous cliquez dessus. Le lien ci-dessus nous amènera à http://example.com . Pour éviter cela, nous pouvons ajouter un simple morceau de code jQuery pour cibler les balises d'ancrage avec la disabledclasse à appeler event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Nous pouvons basculer la disabledclasse en utilisant toggleClass():
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
$this.toggleClass('disabled', state);
});
}
});
// Disabled with:
$('a').disable(true);
// Enabled with:
$('a').disable(false);
Démo de liaison désactivée JSFiddle .
Combiné
Nous pouvons ensuite étendre la fonction de désactivation précédente effectuée ci-dessus pour vérifier le type d'élément que nous tentons de désactiver à l'aide is(). De cette façon , nous pouvons , toggleClass()si ce n'est pas un inputou buttonélément, ou bascule le disabledsi elle est la propriété:
// Extended disable function
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);
});
}
});
// Disabled on all:
$('input, button, a').disable(true);
// Enabled on all:
$('input, button, a').disable(false);
Démo JSFiddle combinée complète .
Il convient de noter en outre que la fonction ci-dessus fonctionnera également sur tous les types d'entrée.
