使用attr()禁用Jquery输入框

Question

我在使用attr()来禁用或只读一个输入框时遇到了一些问题。

removeAttr('disabled')可以正常工作。

attr('name', 'something')也可以正常工作。

attr('id', 'something else')也可以正常工作。

但是，attr('disabled','disabled')不起作用——它只在DOM中写入了disabled=""，但没有禁用输入框。

而attr('readonly','readonly')也不起作用——它只在DOM中写入了readonly=""，但输入框仍然可以编辑。

$(document).ready(function() {

    $("input[name='rdio']").live('click', function() {
        $(".radio_select").find("input[name='rdio']").each(function(){
            if(this.checked)
            {
                $("#"+this.value).removeAttr('disabled');        
            }
            else
            {
                $("#"+this.value).attr('disabled','disabled');
            }
        });
    });
});

有人遇到过这种情况吗？顺便说一下，我使用的是jQuery 1.4.2版本。

编辑：抱歉，这是我尝试过的一些方法，但我忘记恢复原状了。所以使用attr()仍然存在问题。

- Chris-NTA

---

我猜 .attribute() 只是一个打错的字吧？ - jAndy

它只写了disabled = ""，但是它没有起作用？我的意思是这个元素被禁用了吗？ - Reigel Gallarde

Reigel。是的，它只写了disabled = ""，并没有禁用输入字段。如果我手动（Firebug）在值部分添加disabled，则会禁用输入字段。 - Chris-NTA

第三次阅读后，我仍然不知道你的问题是什么。你是在抱怨缺少“value”还是它无法真正地“禁用”元素？ - jAndy

jAndy - 禁用输入字段失败。 - Chris-NTA

@Chris-NTA：我真的认为你需要重新排列那段代码。看起来很奇怪，我相信问题肯定出现在其中某个地方。你能告诉我你实际上想要实现什么吗？ - jAndy

Answer 1

很有趣的是，您在哪个浏览器中遇到了这种行为。更有趣的是，如果“不起作用”意味着该元素没有被禁用，还是只是缺少disabled属性。

根据W3C的规定，disabled或readonly属性不应该有值。

因此在语法上：

<select disabled></select>

这是正确的。不需要值。

不幸的是，使用javascript无法创建这样的结构（如果您不想覆盖html），因此您必须添加一些值。由于两个属性都是布尔类型，您可以添加任何值。.attr('disabled', 'foobar')和.attr('disabled', true)一样好。

- jAndy

---

我正在使用FF 3.6。这是我得到的：在DOM中是disabled = ""。如果你只放置disabled是不起作用的。我猜“disabled”是一个属性，需要一个值。 - Chris-NTA

Answer 2

尝试使用-

$('#target').attr("disabled", true);
$('#target').attr("readonly", true);

- Sadat

---

那个 .attribute() 应该是打错了。它会抛出异常而不是引起所描述的行为。 - jAndy

不起作用。我已经尝试了不同的方法。唯一有效的方法是使用纯JavaScript（document.forms['form'].target.setAttribute('disabled','disabled');）。 - Chris-NTA

Answer 3

我认为应该是这样的

attr('disabled', true);

对于只读变量也是一样的

- Ahmed Magdy

Answer 4

@OP：我怀疑按钮在功能上被禁用了，但在视觉上没有被禁用。

我遇到了完全相同的症状。使用attr('disabled', 'disabled')在DOM中产生了disabled=""。事实上，按钮已经被禁用了，因为它不再生成点击事件，也不再提交表单。然而，它仍然被突出显示，就像它没有被禁用一样。

原因是按钮的CSS，其中包含伪选择器':active'。即使按钮被禁用，这个选择器仍然被应用。在active中添加':not([DISABLED])'可以去除误导性的高亮。

对于Drupal用户来说，Seven主题有这个CSS，而Seven是默认的管理主题。

我在FF和Chrome中验证了这一点。

- Dan Chadwick

Answer 5

.attr('disabled', 'disabled'); 做得很好。

W3C规范指出，必须在不带值的情况下设置属性。但这是一个jquery attr()函数的问题。你不能不设置属性值。

它在DOM中写入disabled=""。但它工作得非常好。

在这里查看：http://www.w3schools.com/tags/att_input_disabled.asp

- larrydahooster

Answer 6

使用 .attr('disabled', true/false); 和相同的方法来处理 readonly 是最快捷的方法。但是，请记住，如果一个元素被“禁用”，它将不会出现在表单提交数据中，而 readonly 将出现在提交的数据中。这是开发人员想要禁用输入但又想知道为什么他们在 PHP 中没有得到他们的 $_POST 数据的常见陷阱。

只是提醒一下！

- Paul Dragoonis