Para deshabilitar un botón con jQuery, debe establecer la propiedad deshabilitada en el botón usando el método prop. Por ejemplo $(‘.my-button’).prop(‘disabled’, true).
Aquí está el proceso paso a paso:
- Seleccione el botón que desea deshabilitar.
- Utilice el método prop de jQuery.
- Establezca la propiedad deshabilitada en verdadero
Tabla de contenido:
Deshabilitar botón al hacer clic
Entonces, digamos que tenemos un botón y queremos desactivar el botón al hacer clic en otro botón:
<button id="my-button">Save</button>
<button id="disable-button">Disable button</button>
Este es el código jQuery que necesitaremos:
var disableButton = (e) => {
$('#my-button').prop('disabled', true);
};$(document).on('click', '#disable-button', disableButton);
Deshabilitar el botón de enviar cuando el área de texto está vacía
Este es un escenario muy común que podemos encontrar en multitud de aplicaciones web o sitios web. En aquellos casos en los que no tenga sentido presentar un formulario con un área de texto vacíaes una buena práctica deshabilitar el botón de envío cuando su área de texto no tiene contenido.
Todo lo que tenemos que hacer es:
- Adjunte el evento keyup a nuestro elemento textarea
- Recuperar el valor del área de texto
- Eliminar espacios en blanco finales blancos
- Deshabilite el botón Enviar cuando el valor esté vacío.
Digamos que tenemos el siguiente código HTML con nuestra área de texto y nuestro botón:
<div>
<textarea id="my-textarea" rows="5" cols="30"></textarea>
</div><button id="my-button" disabled>Save</button>
Este sería nuestro código jQuery:
var checkTextarea = (e) => {
const content = $("#my-textarea").val().trim();
$('#my-button').prop('disabled', content === '');
};
$(document).on('keyup', '#my-textarea', checkTextarea);
¿Recuerdas que el segundo parámetro del método prop también nos permite usar una función en lugar de un booleano?
Podemos probarlo en este mismo ejemplo reemplazando nuestro código anterior con el siguiente, donde solo devolvemos un valor booleano en la función que pasamos como parámetro.
var checkTextarea = (e) => {
$('#my-button').prop('disabled', (e) => {
return $("#my-textarea").val().trim() === '';
});
};
Deshabilitar el botón Enviar cuando la entrada está vacía
La misma técnica exacta que usamos para el área de texto. se puede aplicar para cualquier otra entrada.
Actualicé el atributo id y el nombre de la función, pero el resto sigue igual:
Botón deshabilitar al cargar la página
La forma más fácil de mostrar un botón como deshabilitado en la carga de la página es asignándole directamente el atributo deshabilitado en el código HTML:
<button id="my-button">Save</button>
<button id="my-button" disabled>Save</button>
Sin embargo, si por alguna razón necesita hacer esto dinámicamente y no tiene forma de modificar el código HTML, aún puede hacerlo usando jQuery.
Es tan simple como deshabilitarlo en el documento listo:
$(document).ready(function () {
$('#my-button').prop('disabled', true);
});Botón de activación con jQuery
Como probablemente haya adivinado, habilitar un botón es tan simple como deshabilitarlo. De hecho, usaremos exactamente el mismo método prop. La única diferencia es que ahora estableceremos el valor de deshabilitado en falso en lugar de verdadero.
$('#my-button').prop('disabled', true);
$('#my-button').prop('disabled', false);
Aquí hay un ejemplo:
Comprobando si el botón está deshabilitado o habilitado con jQuery
Para comprobar el estado de un botón todo lo que tenemos que hacer es obtener el valor de la propiedad deshabilitada.
El método prop no solo nos proporciona una forma de establecer las propiedades, sino que también nos permite verificar su estado. Es tan simple como omitir el segundo parámetro:
const isDisabled = $('#my-button').prop('disabled');if( isDisabled ){
console.log("Is disabled!");
}
else{
console.log("Is enabled");
}
Deshabilitar botón con JavaScript
Si jQuery no es lo tuyo, puedes deshabilitar un botón con JavaScript estándar (es decir, solo con JavaScript).
Para deshabilitar un botón con JavaScript, debe establecer la propiedad deshabilitada en verdadero estableciendo directamente el valor en la propiedad deshabilitada en el elemento DOM. Por ejemplo: document.querySelector(‘#my-button’).disabled = true.
Entonces, aquí está la equivalencia:
$('#my-button').prop('disabled', true);
document.querySelector('#my-button').disabled = true
const state = $('#my-button').prop('disabled');
const state = document.querySelector('#my-button').disabled;
Luego, también deberá cambiar los detectores de eventos respectivos si usa alguno.
He aquí un ejemplo de cómo desactivar el botón después de hacer clic usando JavaScript:
Referencias
Artículos relacionados
