Disable then re-enable click function jQuery

Question

I have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button. Currently this is the click function on the file-selection button:

$(document).ready(function() {
    $("#file-button").click(function() {
        $('#file').trigger('click');
    });
});

That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind() and unbind() and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.

Something like this would be preferable:

$('#file-button').disable();
$('#file-button').enable();

I have tried the on() and off() and they do not seem to work either.

score 8 · Accepted Answer · answered Feb 22 '13 at 04:11

8

SOLUTION -- thanks to Eric

I changed my initial click function to the following:

$(document).ready(function() {
    $("#file-button").click(function() {
      if ( $('#file-button').attr('disabled') == "disabled" ) {
        return false;
      }
      else {
          $('#file').trigger('click');
      }
    });
});

And I set the following to disable the button

$('#file-button').attr('disabled','disabled');

And this to re-enable it:

$('#file-button').removeAttr('disabled');

answered Feb 22 '13 at 04:11

ramo

945
4
12
20

1

I used this too but found that the `else` was unnecessary/redundant. – id.ot Jan 24 '14 at 02:16
1

I needed to trigger a click event on `#file` when the `#file-button` was clicked. So the else statement was necessary. – ramo Jan 25 '14 at 03:01
This doesn't work anymore, please refer to this link: http://stackoverflow.com/questions/15122526/disable-button-in-jquery – EugenSunic Nov 28 '15 at 12:04

Eric Freese · Answer 2 · 2013-02-11T09:28:54.797

4

Disable the button using jQuery $.prop() function:

$("input[type=submit]").prop('disabled', true);

Add a conditional to the click handler to check if the button is disabled:

$("#file-button").click(function() {
  if (!$(this).is(':disabled')) {
    $('#file').trigger('click');
  }
});

Later on re-enable the button:

$("input[type=submit]").prop('disabled', false);

Or you might be able to use the submit event instead of click, if there is a form involved:

$("#whatever-your-form-is").on('submit', function() {
  $('#file').trigger('click');
});

edited Feb 11 '13 at 09:28

answered Feb 11 '13 at 08:50

Eric Freese

1,485
2
13
25

I think you have a logic mistake with this line `if ($(this).is(':disabled')) {` how do I check to make sure that disabled it set to false, not true. – ramo Feb 11 '13 at 09:13
You're right. Edited to fix it. Just add a `!`: `if (!$(this).is(':disabled'))` – Eric Freese Feb 11 '13 at 09:22
I fixed it with a bit of altering of your code, have a look at the solution in my question. Thanks for the idea Eric! – ramo Feb 11 '13 at 09:22
I preferred this solution but had some trouble with the "if disabled" statement. After changing it to this it works: `var attr = $("input[type=submit]").attr('disabled'); if (typeof attr == typeof undefined || attr == false) {` – Kt Mack Sep 12 '14 at 07:26

Dipesh Parmar · Answer 3 · 2013-02-11T08:58:43.053

1

Try Attr jQuery function.

$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');

Tested Code

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function()
    {
        $("#file-button").click(function(e)
        {
            e.preventDefault();
            $(this).attr('disabled','disabled');
            return false;
        });
    });

</script>

<input type="button" id="file-button" value="ClickMe" />

edited Feb 11 '13 at 08:58

answered Feb 11 '13 at 08:33

Dipesh Parmar

27,090
8
61
90

This doesn't work. The click function that I have in my JavaScript code is overriding the disabled attribute as it is listening to the click function. – ramo Feb 11 '13 at 08:38
Your updated answer doesn't work neither. [codepen](http://codepen.io/anon/pen/onIFp) – ramo Feb 11 '13 at 09:05
You can have a look at the codepen, I can't share all of my code, but if you look at the codepen, what I want is something to put under the first click function that would disable it, and then after the disable function to enable it. Sorry if I am not making sense. > Click function is set > Click function is disabled > Click function is re-enabled without re-setting the first click function again. – ramo Feb 11 '13 at 09:10

EnterJQ · Answer 4 · 2013-02-11T08:47:45.503

0

You have to refer input button in order to disable button ,

Something like below

  $("input[type=submit]").prob('disabled', true);
  $("inpur[type=submit]").prob('disabled', false);

edited Feb 11 '13 at 08:47

answered Feb 11 '13 at 08:35

EnterJQ

1,014
8
18

This doesn't work. The click function that I have in my JavaScript code is overriding the disabled attribute as it is listening to the click function. And by the way it is not a submit button, it is the file selection button that is just in a ` – ramo Feb 11 '13 at 08:39
Sorry, did I try with what? – ramo Feb 11 '13 at 08:43
else call it by class name – EnterJQ Feb 11 '13 at 08:49
Sorry I don't understand it, can you give me an example of how this would be used in my case? – ramo Feb 11 '13 at 08:49

Disable then re-enable click function jQuery

4 Answers4

Linked