如果我只知道该元素的名称，如何禁用页面上的按钮

How can I disable a button on my page if I know only the name of that element?

本文关键字：何禁用 按钮 元素 如果      更新时间：2023-09-26

我有以下 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
}

我已经有一种方法可以从所有按钮中删除禁用者。但是在那之后，我如何在不使用jQuery的情况下禁用与localStorage.buttonColor同名的按钮呢？

我也可以在for (var button in themeButtons)循环中完成所有这些操作吗？如果我能做到这一点，它可能会更干净

地解决。

如果只有一个按钮：

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;
}
相关文章：