Desactivar botón durante X segundos

Publicada el por

Veamos cómo desactivar un botón de un formulario web durante X segundos con la librería jQuery

Tutorial 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