Desactivar botón durante X segundos
Veamos cómo desactivar un botón de un formulario web durante X segundos con la librería jQuery
Código HTML
Vamos a ver el código que crea el botón en HTML5 y le asigna la ID “mybutton”
<input type="button" value="My Button" id="mybutton" />
<div id="console"></div>Además, creamos un bloque donde escribiremos que el botón ha sido desactivado.
Código JavaScript
Ahora el código que ha la acción.
$('#mybutton').click(function(e){
$('#mybutton').prop('disabled', true);
setTimeout(function() {
$('#mybutton').prop('disabled', false);
}, 2000);
$('#console').html('<br />Disabled');
});Primero capturamos el click de nuestro botón: $(‘#mybutton’).click(function(e){
Sólo entrar, desactivamos el botón: $(‘#mybutton’).prop(‘disabled’, true);
Una vez desactivado el botón, indicamos con setTimeout que a los 2 segundos (2000 milisegundos) vuelva a activar el botón
setTimeout(function() { $(‘#mybutton’).prop(‘disabled’, false); }, 2000);
Y por últim, para hacer más claro que se ejecuta la acción, mostramos un mensaje en el bloque llamado console: $(‘#console’).html(‘<br />Disabled’);
De esta manera, ya deberíamos saber cómo desactivar un botón durante X segundos en nuestro formulario de página web. Muy válido para evitar que los usuarios aprieten indiscriminadamente el botón.
Código en acción
Y ahora veamos el código en acción para que podáis probarlo o modificarlo a vuestro gusto:
See the Pen jQuery Disable button for X seconds by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Pues nada, otro pequeño tutorial que espero que os sea de utilidad para vuestras aplicaciones.
Más información