How to make button unclickable after it is being clicked?

Question

I want that after my button is clicked, it would be unclickable for a few seconds, how can I do it? I want to write a code for all buttons, not just for a one. So, I need something like that:

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

It is just a pseudo-code, could you give me a hand?

Answer 1

With jQuery...

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

    });    
});

jsFiddle.

Without 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);

    });    
});

Alternatively capture the clicks on a persistent ancestor element and check if they're input[type="button"] types. This prevents attaching multiple events for each element.

Answer 2

Add the disabled attribute.

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