jQuery .attr("disabled", "disabled") 在Chrome中无效

Question

不确定为什么这个不起作用。

当用户点击我的应用程序的“编辑”按钮时，禁用的文本字段变为可编辑状态：

$("#bewerken").click(function(e)    {
    $("input[disabled='disabled']").removeAttr('disabled');
});

当用户保存后，我希望禁用文本字段； 我将以下代码绑定到我的保存按钮：

$("#save_school_changes").click(function(e) {
    //stuff

    $.ajax({
        type: "POST",
        url: "/school/save_changes",
        data: { //stuff },
        success: function(data)
        {
            $("#feedback_top").html("<p>" + data['message'] + "</p>").slideDown('slow').delay(2000).slideUp();
            $("input[type='text']").attr('disabled', 'disabled');

        }
    });

    e.preventDefault();
});

据我所知，这应该可以再次禁用文本字段。然而，在Chrome中似乎不起作用。在Firefox中是有效的。我还没有测试过IE或Safari。有没有办法让这在Chrome中也起作用？非常感谢！

- Joris Ooms

---

附注：您可以使用:disabled选择器来代替input[disabled='disabled']。 - namuol

Answer 1

如果你正在使用 jQuery < 1.6 请执行以下操作：

jQuery("input[type='text']").attr("disabled", 'disabled');

如果您使用的是 jQuery 1.6+：

jQuery("input[type='text']").prop("disabled", true);

参考这个问题：.prop() vs .attr()，了解更多信息。

或者你也可以尝试这个：

$('input:text').attr("disabled", 'disabled');

在此处查看有关：text的信息

- Naftali

---

使用1.5.2版本；不幸的是，我仍然无法使用您提供的代码使其正常工作。感谢您的时间。 - Joris Ooms

$("input:text").attr("disabled", "disabled");。只是复制粘贴来检查是否有相同的代码，但它无法工作。天啊，Chrome 真是太傻了。:( - Joris Ooms

@Cabaret，你可以在jsfiddle.net上发布一个示例（可运行）代码，并查看是否获得相同的结果吗？ - Naftali

@neal 我在使用 $(this).attr('disabled', 'disabled') 时遇到了问题...按钮已被禁用，但表单未提交...它在 Firefox 中可以工作，但在 Chrome 中无法工作...我尝试了你提供的所有方法...请告诉我是否有其他解决方法。 - Dragon

@Sadaquat，你有一个我可以查看的代码片段吗？ - Naftali

Answer 2

对于我来说，这些答案都没有起到作用，但最终我找到了一个有效的方法。

我需要在IE浏览器中使用此方法-

$('input:text').attr("disabled", 'disabled');

我还需要在Chrome和Firefox上添加以下内容 -

$('input:text').AddClass("notactive");

and this -

<style type="text/css">
    .notactive {
        pointer-events: none;
        cursor: default;
    }
 </style>

- IQtheMC

Answer 3

如果您要删除所有输入框的禁用属性，那么为什么不直接这样做：

$("input").removeAttr('disabled');

在 Ajax 成功后：

$("input[type='text']").attr('disabled', true);

确保在提交之前删除disabled属性，否则它不会提交该数据。如果需要在更改之前提交它，则需要使用readonly。

- fanfavorite

---

需要注意的一点是，如果您希望通过get或post提交数据，则使用readonly。 - fanfavorite

Answer 4

这是一篇旧文章，但我尝试了所有的解决方案都不行，所以我想分享我的解决方案，如果有人需要的话。

我也遇到了同样的问题。

在我的情况下，我需要禁用的控件是一个带有子下拉框的用户控件，在IE中可以禁用，但在Chrome中不能。

我的解决方案是禁用每个子对象，而不仅仅是用户控件，使用以下代码：

$('#controlName').find('*').each(function () { $(this).attr("disabled", true); })

现在在Chrome中对我起作用了。

- RoyBS

Answer 5

Here:
http://jsbin.com/urize4/edit

实时预览
http://jsbin.com/urize4/

你应该使用 "readonly"，像这样：

$("input[type='text']").attr("readonly", "true");

- Oscar Godson

---

谢谢，我会去看看。readonly 和 disabled 之间有重要的区别吗？还是基本上一样的？ - Joris Ooms

除了一个小细节，它们是一样的...readonly没有任何默认的浏览器CSS，而disabled有。在这个例子中，我只是做了[readonly] { filter: alpha(opacity = 50); opacity:0.5; }，并实现了相同的效果。 - Oscar Godson

一个主要的区别是：设置了readonly属性的字段在表单提交时会被发送到服务器，而disabled元素不会被发送。 - mu is too short

Answer 6

最好使用类。

$("#...").addClass("disabled");
$("#...").removeClass("disabled");

- user5583316

Answer 7

尝试使用以下代码：$("input[type='text']").attr('disabled', true);

- RussellUresti

---

这是一种技术的示例：http://jsbin.com/ofuca3/edit -- 你试图禁用的输入是否通过ajax编写？还是它已经存在于DOM中？ - RussellUresti

它已经存在于DOM中。我会查看您的链接！谢谢。 - Joris Ooms

Answer 8

你尝试过使用prop()吗？

嗯，prop()对我来说似乎有效。

- Galled

---

注意：@cabaret，这仅适用于jQuery 1.6版本，如果您不在该版本上，则无法使用。 - Oscar Godson

请看我的回答以及原帖作者的回复。 - Naftali

Answer 9

从HTML-5开始，大多数禁用属性都无法与锚标签一起使用。因此，我们需要将其更改为“按钮”，并根据适当的颜色、边框样式等进行样式设置。这是Chrome用户面临任何类似问题的最合适解决方案。只有少数元素支持“disabled”属性：Span、select、option、textarea、input、button。

- Jyothise Johny

Answer 10

我的问题是使用禁用属性的元素需要被定义为表单元素，即输入类型才能起作用。两者都可以使用attr()和prop()，但我选择了后者以便于未来的可维护性。

- sledgeweight