CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer-10
Cadz
Cadz

Reputation: 151

How to properly disable a button in IE10?

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

Upvotes: 0

Views: 2335

Answers (3)

Jai
Jai

Reputation: 74738

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(){}
     });
 });

Upvotes: 0

Khamidulla
Khamidulla

Reputation: 2975

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.

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

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

Upvotes: 1

Related Questions