How to properly disable a button in IE10?

Question

Guys I have tested this code in Chrome, Firefox, IE 7 8 and 9. Only in IE10 it doesn't work.

 $("#upload_file").live('click', function() {
     $('#upload_file').prop('disabled', 'disabled');

     //then do some more codes like ajax
 }

When I click the upload button, it should disable that button to avoid double clicks. This works properly on other browsers except in IE10. in IE10 it doesn't look disabled, but it wont execute the other codes below it. So I'm assuming it really disabled the functionality, not the button

Answer 1

Disabled should be set to a boolean value:

$('#upload_file').prop('disabled', true);

As per the jQuery docs :

The .prop() method should be used to set disabled and checked instead of the .attr() method.

$( "input" ).prop( "disabled", false );

Answer 2

It seams to me that your problem came from using old version of jQuery. Because IE 10 recently created while your jQuery i guess is 1.6 which is not optimized for new version of browsers. I strongly suggest to you update to new version, unless you are re-factoring existing code.

Answer 3

Try this with .on() with event delegation:

 $(document).on('click', '#upload_file', function() {
     $(this).prop('disabled', true);
     //then do some more codes like ajax
 });

you can use closest static parent to the target element("_#upload_file_") that may be a <div>, <table> which holds the button.

To re-enable the button:

 $(document).on('click', '#upload_file', function() {
     $(this).prop('disabled', true);
     $.ajax({
         url: your url,
         type: your type,
         .......
         success:function(){

         },
         complete:function(){
            $('#upload_file:disabled').prop('disabled', false); //<----here
         },
         error: function(){}
     });
 });