javascript - 使用 CSS 向特定元素添加值

Question

我有许多动态创建的输入元素。我想获取所有未禁用的元素，并为其添加边框颜色。从CSS中，我可以得到所有被禁用的东西，如下所示:

    input[type="text"][disabled] {
    border-color: black;
}

这非常有效。

我试图让那些没有禁用的人这样做:

    input[type="text"][enabled] {
    border-color: green;
}

由于某种原因这不起作用，并且我没有收到错误。

我不想使用 JS/JQuery 的原因是浏览器最终在页面加载时使用了超过 100% 的 CPU。 有罪的代码如下所示:

var elements = $(":input");
var elementsVisible = elements.prop("disabled");

if(!elementsVisible) { 
    $(this).css("border-color", "green") : 
}

如何从 CSS 文件中获取启用的输入字段？顺便说一句，我正在使用 Extjs。如果可能的话，并且使用 JS/JQuery 比 CSS 有更多好处，我正在倾听:-)

Answer 1

input[type="text"] {
  background-color: green;
}
input[type="text"][disabled] {
  background-color: black;
}

<input type="text" name="text_1" />
<br />
<input type="text" name="text_1" disabled/>
<br />
<input type="text" name="text_1" />
<br />
<input type="text" name="text_1" disabled/>
<br />
<input type="text" name="text_1" />

编辑:尽管 [disabled] 和 :disabled 的工作方式相同，但我会使用 :disabled。使其尽可能接近您的代码。