如果我只知道該元素的名稱，如何禁用我的頁面上的按鈕？

Question

我有以下HTML：

<button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button> 
<button name="black" onclick="setThemeColor(this.name)">Black</button> 

與此腳本：

if (localStorage.buttonColor) { 
    var themeButtons = document.querySelectorAll(".theme"); 
    for (var button in themeButtons) { 
     themeButtons[buttons].removeAttribute("disabled"); 
    } 
    // I need here to disable the button with the name that matches localstorage name 
} 

我已經有到位的方式從所有按鈕刪除禁用。但我怎麼才能禁用與localStorage.buttonColor同名的按鈕，而不使用jQuery？

我也可以在for (var button in themeButtons)循環中做所有這些嗎？如果我能做到這一點，它可能會更加清潔解決方案。

Answer 1

如果只有一個按鈕：

document.querySelector('button[name="' + localStorage.buttonColor + '"]').disabled = true; 

或者：

var el = document.getElementsByName(localStorage.buttonColor); 
if (el) { 
    el[0].disabled = true; 
} 

如果有多個要素：

var all = document.querySelectorAll('button[name="' + localStorage.buttonColor + '"]'); 
for (var i = 0, len = all.length; i<len; i++){ 
    all[i].disabled = true; 
} 

如果有多個按鈕，你需要啓用那些不分享localStorage.buttonColor名稱的人：

var buttons = document.getElementsByTagName('button'), 
    buttonsQSA = document.querySelectorAll('button'); 

// iterate over whichever collection you prefer to use 
for (var i = 0, len = buttonsQSA.length; i<len; i++){ 
    buttonsQSA[i].disabled = buttonsQSA[i].name == localStorage.buttonColor; 
}