Botões
Os botões são simples de desativar, pois disabledé uma propriedade de botão que é manipulada pelo navegador:
<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>
Para desabilitá-los com uma função jQuery personalizada, basta usar 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);
JSFiddle botão desativado e demonstração de entrada .
Caso contrário, você faria uso do jQuery prop() método :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Tags de âncora
Vale ressaltar que disablednão é uma propriedade válida para tags de âncora. Por esse motivo, o Bootstrap usa o seguinte estilo em seus .btnelementos:
.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;
}
Observe como a [disabled]propriedade é segmentada, bem como um.disabled classe. A .disabledclasse é o que é necessário para fazer uma marca de âncora parecer desativada.
<a href="http://example.com" class="btn">My Link</a>
Obviamente, isso não impedirá que os links funcionem quando clicados. O link acima nos levará a http://example.com . Para evitar isso, podemos adicionar um pedaço simples de código jQuery para direcionar tags âncora com a disabledclasse a ser chamada event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Podemos alternar a disabledclasse usando 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);
Demonstração do link desativado do JSFiddle .
Combinado
Podemos então estender a função de desativação anterior feita acima para verificar o tipo de elemento que estamos tentando desativar usando is(). Desta forma, podemos toggleClass(), se não é um inputou buttonelemento, ou alternar a disabledpropriedade se ela é:
// 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);
Demonstração JSFiddle combinada completa .
Vale a pena notar ainda que a função acima também funcionará em todos os tipos de entrada.
