如何通过自定义group属性批量禁用ID不同的按钮？

当然可以实现批量禁用同组按钮！你的思路完全没问题，只是document.getElementById()只能根据ID定位单个元素，没法直接通过自定义属性批量选择元素。下面给你几种简单实用的方法：

方法一：使用querySelectorAll（推荐） #

这是最简洁高效的方式，利用CSS选择器直接匹配所有带指定自定义属性的按钮，然后遍历禁用：

// 选中所有group属性为hello的按钮
const targetButtons = document.querySelectorAll('button[group="hello"]');
// 遍历每个按钮，设置禁用状态
targetButtons.forEach(button => {
  // 两种写法都生效，推荐下面这种更直观的布尔赋值
  button.disabled = true;
  // 或者用你原本的写法：button.setAttribute('disabled', 'disabled');
});

querySelectorAll()支持完整的CSS选择器语法，button[group="hello"]就是精准匹配所有group属性等于hello的<button>元素，非常灵活。

方法二：规范自定义属性（更符合HTML标准） #

HTML规范里推荐用data-*前缀的自定义属性，比如data-group="hello"，这样可以避免和未来可能新增的HTML内置属性冲突。用法和上面几乎一样，只是选择器调整一下：

<!-- 按钮标签改成这样 -->
<button data-group="hello">按钮1</button>
<button data-group="hello">按钮2</button>

const targetButtons = document.querySelectorAll('button[data-group="hello"]');
targetButtons.forEach(button => button.disabled = true);

方法三：遍历所有按钮筛选（兼容旧浏览器） #

如果需要兼容非常老旧的浏览器（比如IE8及以下），可以先获取所有按钮，再通过属性筛选：

const allButtons = document.getElementsByTagName('button');
for (let i = 0; i < allButtons.length; i++) {
  const button = allButtons[i];
  if (button.getAttribute('group') === 'hello') {
    button.disabled = true;
  }
}

总结一下，最推荐用querySelectorAll配合规范的data-*自定义属性，代码简洁又符合标准，完全能满足你的批量禁用需求！

内容的提问来源于stack exchange，提问作者Jax Flaxx