IE7 / IE8 interaction with JQuery .removeAttr('disabled'), not applying css

Question

This is more of a curiosity than a question, but I'm wondering why the following isn't working.

Say I have an html form with a selector and a submit button.

 <form action="/foo/createActivity" method="post" name="activityform" id="activityform" >

<select name="activity" id="activity" >
<option value="1" >Activity 1</option>
<option value="2" >Activity 2</option>
</select>
<input type="submit" class="submit" id="add" value="Add >>"/>
</form>

Then I have an ajax call with jQuery defined

$('#activity').change(function() {
    tryDisable($('#activity').val());
});

function tryDisable(activity) {
$.ajax({
    type: 'GET',
    contentType: 'application/json',
    cache: false,
    url: '/foo/checkActivity',
    data: {
        activity: activity
    },
    success: function(disableSubmit) {

        if (disableSubmit == "true") {
            $('#add').attr('disabled', 'true');
        } else {
            $('#add').removeAttr('disabled'); // Problem in IE, doesn't take away CSS of disabled
            // $('#add').css({"text-align" : "center"}); 
            // NO idea why the above fixes the problem, TODO find out
        }
    },
    dataType: 'json'
});
return false;
}

You'll see in my comments that just the .removeAttr('disabled') is causing the button to re-enable, but the button still looks like it's disabled (gray-ed out). However, if I 'tickle' the css via jquery as I did in the commented out line, the correct, non-disabled styling applies. Firefox and Chrome work fine with just the first line, as I expected.

Does anyone know why this might be? What's IE doing here that's so odd?

"What's IE doing here that's so odd?" - Hahaha that's something we all ask ourselves sometime in our web-dev life! But I think you might need to give us more information. Which version of Internet Explorer are you talking about here? — Eganr, Oct 06 '11 at 17:17
Sorry I neglected to mention that! Not sure about IE9, but I tried it in 7 and 8 and saw the described symptoms. And yes, I'd be rich if I had a dollar for every time just I've said that, let alone all web devs. I was hypothesizing with a coworker how many collective man-hours IE bugs have cost the human race, and at base developer pay my guess was in the hundreds of millions of dollars... :) — Will Buck, Oct 07 '11 at 03:27

score 9 · Accepted Answer · edited May 23 '17 at 12:19

I did have the same problem before. I googled it and found this note from jQuery website.

Note: Trying to remove an inline onclick event handler using .removeAttr() won't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead:

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick); // --> null

I also found a couple of posts here in SO regarding the .removeAttr():

This post by the John Resig is also helpful.

IE7 / IE8 interaction with JQuery .removeAttr('disabled'), not applying css

1 Answers1

Linked