8

[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]

Akos
  • 1,997
  • 6
  • 27
  • 40

2 Answers2

23
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/

karim79
  • 339,989
  • 67
  • 413
  • 406
  • My bad, fixed - and demofied. – karim79 Oct 28 '11 at 12:42
  • @mblase75 - not entirely sure, but something to do with `.prop` and `.removeProp`. Updated & fixed. – karim79 Oct 28 '11 at 12:46
  • @karim79 perhaps you had to set the `.prop` to false instead of removing it -- this seems to work too: http://jsfiddle.net/mblase75/pHxF2/3/ -- I suppose removing the 'disabled' property means you can't set it anymore. – Blazemonger Oct 28 '11 at 12:49
  • 4
    @karim79 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. – Blazemonger Oct 28 '11 at 12:51
1

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">
I_Literally_Cannot
  • 158
  • 11