为什么将“disabled”属性设置为false也会删除“disabled”属性？

Question

我有一个按钮，最初是禁用的：

<button disabled="disabled">Lorem ipsum</button>

对于这个按钮，button.getAttribute('disabled') 返回 "disabled"。然而，当我使用JavaScript启用此按钮时：

button.disabled = false;

然后button.getAttribute('disabled')开始返回null。

实时演示: http://jsfiddle.net/Rhj3c/1/

为什么会这样？.getAttribute()不应该返回原始HTML源代码中的值吗？那我如何确定按钮在原始HTML源代码中是否已禁用？

- Šime Vidas

---

它移除了该属性，因为当按钮不可用时，它不能再具有禁用属性。某些属性在需要时确实会更改属性。 - adeneo

Answer 1

.getAttribute()应该返回原始HTML源代码中的值吗？

不，根据规范（重点在于我）：

如果反射的IDL属性是一个boolean属性，则获取IDL属性必须返回true，如果内容属性设置了，则返回false，如果没有设置，则返回false。设置时，如果IDL属性设置为false，则必须删除内容属性，如果IDL属性设置为true，则必须将其设置为空字符串。（这对应于布尔内容属性的规则。）

那么，我如何确定按钮是否在原始HTML源代码中被禁用？

在它改变之前检查它。如果问题确实仅限于“原始HTML源代码”，而不是“元素开始状态”（例如，如果它是在JavaScript中创建的），那就可以只做：

var originallyDisabled = Array.prototype.slice.call(
    document.querySelectorAll('[disabled]')
);
⋮
if (originallyDisabled.indexOf(button) !== -1) {
    …
}

- Ry-

---

如果通过JavaScript禁用了它，你可以通过检查源代码（不是使用按F12键出现的Firebug/其他开发工具，而是使用Ctrl+U，从服务器接收到的实际页面）来检查它是否已经被禁用。 - KBN

@xFortyFourx：他们在谈论代码中的运行时检查。 - cookie monster

@cookiemonster 哦，好的，谢谢。我没有看到 OP 问那个问题。 - KBN

@ŠimeVidas：更有趣的是，对于“button”元素，改变“.value”属性确实会更新“value”属性，而对于“input”元素则不同。http://jsfiddle.net/Rhj3c/5/ - cookie monster

@ŠimeVidas：我不知道为什么要这样指定，但是确实是这样的：“value content属性提供了输入元素的默认值。当添加、设置或删除value content属性时，如果控件的dirty value标志位为false，则用户代理必须将元素的值设置为value content属性的值（如果有），否则为空字符串，然后运行当前值的消毒算法（如果定义了）。这似乎很傻。我猜可能与CSS有关，但是[disabled]也没有反映JavaScript属性/属性。” - Ry-

Answer 2

禁用属性是一个布尔属性，当存在时，它指定元素应该被禁用，如果不存在，则启用，并且可以用作：

<!-- Disabled -->
<button disabled>Lorem ipsum</button>

它可以作为一个属性使用（示例）：

var button = document.querySelector('button');
console.log(button.disabled); // true if present, false if not

// Or this
console.log(button.hasAttribute('disabled')); // true if present false if not

更新（示例）：

var input = document.querySelector('input');
input.value = 'Dynamic value';
console.log(input.getAttribute('value')); // "Initial value" attribute is in source
console.log(input.value); // "Dynamic value" property is in ram, rendered on the screen

使用input.value可以在ram中设置属性，而不是在source中，你需要使用setAttribute来更改source，这是你要求的吗？

- The Alpha

---

我的观点是设置属性不应该影响属性。请参见此处：http://jsfiddle.net/bKGLk/ - Šime Vidas

不，我不想改变源代码。我想从源代码中获取值。这适用于value属性，但不适用于disabled属性。 - Šime Vidas