Delay the disabling of an element?

Question

In jQuery how could you go about disabling a button and have it re-enable after a few seconds?

I've tried using a .delay(###).attr and .removeattr, but I can't get it to work. From what I've read this is due to .delay made for animations and instead I need to use fadeout?

See: http://stackoverflow.com/a/8896368/1220302. You'll want to use setTimeout(function() {}, [milliseconds]) — anAgent, Oct 14 '13 at 18:35
`delay` is a queue operation and does only work with CSS animations. — Bergi, Oct 14 '13 at 18:49

score 2 · Answer 1 · answered Oct 14 '13 at 18:36

2

var $btn =  $('input[type="button"]'),
    aFewSeconds = 3000;

$btn.prop({ disabled: true });

setTimeout(function(){
    $btn.prop({ disabled: false});
}, aFewSeconds);

You get the idea.

answered Oct 14 '13 at 18:36

Johan

35,120
54
178
293

KyleMit · Answer 2 · 2013-10-14T19:03:02.473

You can use window.setTimeout(func, delay, [param1, param2, ...]);. Here's a button that will be disabled for a second when clicked, although anything could be used to invoke this action:

HTML

<button class='tempDisable'>Click Me</button>

JavaScript (wrapped in ready function)

$(".tempDisable").click(function () {
    $(this).prop("disabled", true);
    setTimeout(function (el) {
        $(el).prop("disabled", false);
    }, 1000, this);
});

See jsFiddle

score 0 · Answer 3 · answered Oct 14 '13 at 18:36

I'm not 100% sure this will resolve your problem, but try using $elem.attr('disabled', true) to disable, $elem.attr('disabled', false) to enable again. Some reason $elem.removeAttr('disabled') can be unreliable.

.delay() shouldn't be a problem though, please post your code.

Delay the disabling of an element?

3 Answers3

See jsFiddle