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.

Answer 1

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');

Answer 2

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');
});

Answer 3

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