Disable submit button for a short period of time with jQuery?

Question

[I am quite new to jQuery so don't blame me if I get something wrong]

I have been browsing questions here on SO about: "Disable submit button after click". OK there are loads of these stuff around, but I couldn't find out how to disable it for a limited time. e.g. 20 secs.

Maybe I am the idiot but how?

[I've only got a simple html form]

Crocidolite

Answer 1

var enableSubmit = function(ele) {
    $(ele).removeAttr("disabled");
}

$("#submit").click(function() {
    var that = this;
    $(this).attr("disabled", true);
    setTimeout(function() { enableSubmit(that) }, 1000);
});

Demo: http://jsfiddle.net/pHxF2/2/

Huihuie

My bad, fixed - and demofied. – Huihuie

@mblase75 - not entirely sure, but something to do with .prop and .removeProp. Updated & fixed. – Huihuie

@Huihuie perhaps you had to set the .prop to false instead of removing it -- this seems to work too: jsfiddle.net/mblase75/pHxF2/3 -- I suppose removing the 'disabled' property means you can't set it anymore. – Samarium

@Huihuie that was it -- from the docs: "Note: Do not use [.removeProp] to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead." +1 for helping me learn something new today. – Samarium

Answer 2

I know its been several years since this question was answered, but I had a bit of a problem getting this to work. I got something similar to work for me:

var enableBtn = function() {
        $('.btn').attr("disabled", false);
        }
        $('.second').click(function (){
            var that = this;
            $('.second').attr("disabled", true);
            setTimeout(function() { enableBtn(that) }, 1500);
        });
        $('.main').click(function (){
            var that = this;
            $('.main').attr("disabled", true);
            setTimeout(function() { enableBtn(that) }, 1500);
        });
        $('.disableall').click(function (){
            var that = this;
            $('.btn').attr("disabled", true);
            setTimeout(function() { enableBtn(that) }, 1500);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn main" value="disable this">
<input type="button" class="btn second" value="disable this">
<input type="button" class="btn disableall" value="disable all">

Democrat