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（'禁用'）导致按钮重新启用，但按钮仍然看起来就像它已被禁用（灰色显示）。但是，如果我像在注释掉的行中那样通过jquery“发送”css，则应用正确的非禁用样式。正如我所料，Firefox和Chrome只在第一行正常工作。

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

Answer 1

之前我确实遇到过同样的问题。我用Google搜索并从jQuery website找到了这张便条。

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

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

我还在SO中发现了一些关于.removeAttr()：

的帖子

John Resig的post也很有帮助。

IE7 / IE8与JQuery .removeAttr（'禁用'）交互，不应用css

1 个答案: