开发者

How to make button unclickable after it is being clicked?

I want that after my button is clicked, it would be unclickable f开发者_高级运维or 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?


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.


Add the disabled attribute.

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


Disabling an element is done by adding the disabled attribute, giving it the value disabled. Enabling it again is done by removing the attribute.

Update: Fixed the answer by using setTimeout -- sorry for the confusion with $.delay.

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


This should do it.

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


Fiddle here: 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);

    });    
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜