¿Cómo hacer que el botón no se pueda hacer clic después de hacer clic en él?

Question

Quiero que después de hacer clic en mi botón, no se pueda hacer clic en él durante unos segundos, ¿cómo puedo hacerlo? Quiero escribir un código para todos los botones, no solo para uno. Entonces, necesito algo como eso:

$(document).ready(function() {  
    $('input[type="button"]').click(function() { 
     $(this).css("hidden: true"); 
     delay(3); 
     $(this).css("hidden: normal"); 
    })  
}) 

Es solo un pseudo-código, ¿podría ayudarme?

Answer 1

con jQuery ...

$(document).ready(function() {  
    $('input[type="button"]').click(function() { 
     var input = this; 
     input.disabled = true; 
     setTimeout(function() { 
      input.disabled = false; 
     }, 3000); 

    });  
}); 

jsFiddle.

Sin jQuery ...

document.addEventListener('DOMContentLoaded',() => {  
    document.querySelectorAll('input[type="button"]') 
    .addEventListener('click', (e) => { 
     let input = e.target; 
     input.disabled = true; 
     setTimeout(function() { 
      input.disabled = false; 
     }, 3000); 

    });  
}); 

Alternativamente capturar los clics en un elemento ancestro persistente y comprobar si son input[type="button"] tipos. Esto evita adjuntar eventos múltiples para cada elemento.

Answer 2

Agregue el atributo deshabilitado.

$(this).attr('disabled', true); 

Answer 3

Desactivación de un elemento se hace añadiendo el atributo disabled, dándole el valor disabled. Habilitarlo nuevamente se hace eliminando el atributo.

Actualización: Se corrigió la respuesta utilizando setTimeout - disculpe la confusión con $.delay.

$(document).ready(function() {  
    $('input[type="button"]').click(function() { 
     var el = $(this); 
     el.attr('disabled', 'disabled'); 
     setTimeout(function() { el.removeAttr('disabled'); }, 3000); 
    })  
}) 

Answer 4

Esto debería hacerlo.

$(document).ready(function() {  
    $('input[type="button"]').click(function() { 
     $(this).hide().delay(3000).show(); 
    })  
}) 

Answer 5

violín aquí: http://jsfiddle.net/ezmilhouse/Hw6Gf/1/

$(document).ready(function() {  
    $('input[type="button"]').click(function() { 
     $(this).attr('disabled','disabled'); 
     setTimeout(function() { 
      $('input[type="button"]').removeAttr('disabled'); 
     }, 3000); 

    });  
});