求助：特定函数执行后无法禁用按钮与容器元素的问题

你想在特定函数执行后，让所有按钮所在的div区域内的按钮禁用，直到页面刷新，但之前的代码没生效，问题出在这两点：

1. document.querySelectorAll('.btn')返回的是NodeList集合，不能直接给整个集合设置disabled属性，必须遍历每个元素单独操作。
2. div元素本身没有disabled属性，这个属性只适用于button、input这类表单元素，所以给div设置disabled完全没用，得操作div里面的button标签。

你的原始代码 #

HTML代码 #

<div class='container'>
    <div class='btn' id='rock'>
        <button><img src="./images/rock-svgrepo-com.svg"></button>
    </div>

    <div class='btn' id='paper'>
        <button> <img src="./images/paper-plane-svgrepo-com.svg"></button>
    </div>

    <div class='btn' id='scissors'>
        <button> <img src="./images/scissors-svgrepo-com.svg"></button>
    </div>
</div>

无效的JS代码 #

function endGame(){
    const buttons = document.querySelectorAll('.btn')
    buttons.disabled = true;
    console.log(buttons);
};

正确的解决方案 #

方案1：直接禁用所有按钮 #

遍历每个.btn下的button元素，给它们设置disabled=true：

function endGame(){
    // 选中所有.btn容器里的button
    const buttons = document.querySelectorAll('.btn button');
    // 遍历逐个禁用
    buttons.forEach(button => {
        button.disabled = true;
    });
};

方案2：彻底锁定整个按钮区域（推荐） #

如果想让整个div区域都无法点击（包括防止用户通过其他方式触发按钮），可以结合CSS样式和按钮禁用：

先添加CSS样式：

/* 禁用状态的样式 */
.btn.disabled {
    pointer-events: none; /* 阻止所有点击事件 */
    opacity: 0.6; /* 视觉上提示已禁用 */
    cursor: not-allowed; /* 鼠标样式变化 */
}

然后修改JS函数：

function endGame(){
    const btnContainers = document.querySelectorAll('.btn');
    btnContainers.forEach(container => {
        // 禁用容器内的按钮
        const button = container.querySelector('button');
        if (button) button.disabled = true;
        // 添加禁用样式到容器
        container.classList.add('disabled');
    });
};

这样既从功能上禁用了按钮，又从视觉和交互上彻底锁定了整个按钮区域，直到页面刷新才会恢复。

内容的提问来源于stack exchange，提问作者Revanth Rockie