Botones
Los botones son fáciles de deshabilitar, ya que disabledes una propiedad del botón que maneja el 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 deshabilitarlos con una función jQuery personalizada, simplemente usaría 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);
Botón deshabilitado JSFiddle y demo de entrada .
De lo contrario, utilizaría el prop()método de jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Etiquetas de anclaje
Vale la pena señalar que disabledno es una propiedad válida para las etiquetas de anclaje. Por esta razón, Bootstrap usa el siguiente estilo en sus .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;
}
Tenga en cuenta cómo [disabled]se orienta la propiedad, así como una .disabledclase. La .disabledclase es lo que se necesita para que una etiqueta de anclaje parezca deshabilitada.
<a href="http://example.com" class="btn">My Link</a>
Por supuesto, esto no impedirá que los enlaces funcionen al hacer clic. El enlace anterior nos llevará a http://example.com . Para evitar esto, podemos agregar una pieza simple de código jQuery para dirigir las etiquetas de anclaje con la disabledclase a la que llamar event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Podemos alternar la disabledclase 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);
JSFiddle deshabilitó la demostración del enlace .
Conjunto
Luego, podemos extender la función de deshabilitación anterior hecha anteriormente para verificar el tipo de elemento que estamos intentando deshabilitar is(). De esta manera podemos toggleClass()si no es una inputo buttonelemento, o alternar la disabledpropiedad si se trata de:
// 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);
Demo combinada completa de JSFiddle .
Vale la pena señalar que la función anterior también funcionará en todos los tipos de entrada.
