使用Javascript禁用元素时，它不会应用样式

Question

在我的CSS中，我尝试使用以下内容设置input个样式：

input[disabled="disabled"], input[disabled="true"] {
    [... styles ...]
}

当我将disabled="disabled"直接添加到HTML时，这可以正常工作，但是当我运行以下JS时：

document.getElementById('id').disabled = true;

表单字段已禁用（即无法对其进行聚焦），但样式不会更改。这是为什么？

Answer 1

使用以下内容：

input[disabled] {
  /* styles */
}

在这里工作正常：http://jsbin.com/asifih/1/edit

Answer 2

document.getElementById('id').disabled = true;仅添加关键字属性disabled，而css正在寻找属性disabled=true。