當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