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

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *