IE7/IE8与JQuery .removeAttr('禁用')交互,不应用css

Question

这更像是一个好奇而不是一个问题,但我想知道为什么以下不起作用.

假设我有一个带有选择器和提交按钮的html表单.

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

然后我有一个jQuery定义的ajax调用

$('#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;
}

你会在我的评论中看到只有.removeAttr('disabled')导致按钮重新启用,但按钮看起来仍然被禁用(灰色显示).但是,如果我像在注释掉的行中那样通过jquery"发送"css,则应用正确的非禁用样式.正如我所料,Firefox和Chrome只在第一行正常工作.

有谁知道为什么会这样？IE在这做什么,这太奇怪了？

Answer 1

我之前确实遇到过同样的问题.我用Google搜索并从jQuery网站上找到了这个说明.

注意:尝试删除内联onclick事件处理程序.removeAttr()将无法在Internet Explorer 6,7或8中实现所需的效果.为避免潜在问题,请.prop()改为使用:

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

我还在SO中找到了几个关于以下内容的帖子.removeAttr():

• removeAttr() 问题
• .prop('checked',false)还是.removeAttr('checked')？

John Resig的这篇文章也很有帮助.