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]

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/

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">