当JavaScript更改元素属性时CSS应该更新吗？

Question

我有一些按钮，在JavaScript中我做了一些操作。根据用户点击的内容，按钮将被启用和禁用。

逻辑和启用/禁用工作良好。但我的CSS没有更新禁用按钮的外观。我想我的问题是，它应该自动更新吗？或者我需要以某种方式处理？

我正在使用ASP.NET MVC，如果这是相关的。

我简单地将此添加到我的视图（用于测试）的顶部：

<style> 
    button[disabled] { 
     background: green; 
    } 
</style> 

和JavaScript的一个片段：

function changeNameEnabled(enabled) { 
    document.getElementsByName("FullNameExact")[0].disabled = !enabled; 
} 

样品按钮：

<button onclick="nameClick(this)" name="FullNameExact" style="height:20%;width:75%;top:5%;left:13%;margin-bottom:5%">FULL NAME EXACT</button> 

，我可以在浏览器中看到该按钮获得disabled属性，并且不可点击

Answer 1

我发现了什么是错误的。看看这个jsFiddle：http://jsfiddle.net/6jht2/1/

我让你的代码在一个小提琴中可用。什么你做的是通过在onclick属性使用此传递一个DOM元素的功能：

<button onclick="nameClick(this)" name="FullNameExact" style="height:20%;width:75%;top:5%;left:13%;margin-bottom:5%">FULL NAME EXACT</button> 

所以，当函数被调用时，它会尝试反转DOM元素。和错误。

即使您将disabled属性设置为布尔值，它也不起作用。你需要在布尔或任何字符串上使用toString，甚至'a'或'foo'。

这里一切正常。希望它会有所帮助。

提示：请勿使用onclick属性。相反，使用DOM事件处理。

Answer 2

按钮[禁用]不会工作，更好地添加一些.disabled类，然后它会工作。

Answer 3

为什么不在禁用它时向按钮添加类？添加类时将自动应用CSS。

document.getElementById("MyElement").className = "MyClass"; 

在一般情况下，在javascript管理类： Change an element's class with JavaScript