Habilitar / deshabilitar el botón de entrada usando JavaScript
- Use JavaScript para habilitar / deshabilitar el botón de entrada
- Use jQuery para habilitar / deshabilitar el botón de entrada
Este tutorial enseña cómo habilitar / deshabilitar un botón de entrada HTML usando JavaScript / JQuery.
A menudo nos encontramos con situaciones en las que queremos habilitar / deshabilitar un botón HTML, como antes y después de enviar un formulario. La mejor manera de hacer esto es usar JavaScript DOM Manipulation para seleccionar el botón y cambiar su estado de disabled a true/false para alternar su estado de on/off. A continuación, veremos dos formas de deshabilitar / habilitar un botón, una usando JavaScript y la otra usando JQuery.
Use JavaScript para habilitar / deshabilitar el botón de entrada
A continuación se muestra la demostración de un botón que se activa cuando se ingresa texto en un cuadro y se desactiva en caso contrario.
código HTML
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
Código JavaScript
let input = document.querySelector('.input');
let button = document.querySelector('.button');
button.disabled = true;
input.addEventListener('change', stateHandle);
function stateHandle() {
if (document.querySelector('.input').value === '') {
button.disabled = true;
} else {
button.disabled = false;
}
}
Aquí, primero almacenamos la referencia a la entrada y el botón en dos variables y luego establecemos el estado predeterminado del botón en deshabilitado. Agregamos un detector de eventos para ver si hay alguna actividad de entrada dentro del cuadro de texto y luego usamos la función stateHandle() para deshabilitar / habilitar el botón de envío en consecuencia.
Use jQuery para habilitar / deshabilitar el botón de entrada
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
Usamos la función ready() para que esté disponible una vez que se ha cargado el documento. El método .on() luego adjunta el controlador de eventos al campo de entrada. El evento change comprobará los cambios en el campo de entrada y ejecutará la función en consecuencia. El método .prop() cambia el estado del botón.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn