如何实现点击测验的任一选项按钮后禁用所有选项按钮

嗨，我来帮你搞定这个问题～你现在的代码里只处理了被点击的那个按钮的禁用，要实现点击任意选项后把所有按钮都禁用，有两种简单的实现方式，我给你详细说下：

方法一：通过类名获取所有按钮并禁用 #

你已经给所有选项按钮加了opt-btn这个类，那在点击事件里，直接获取所有带这个类的按钮，然后逐个禁用就好啦。把你原来的option.disabled = true;替换成下面这段代码：

// 获取所有带opt-btn类的选项按钮
const allOptionBtns = document.querySelectorAll('.opt-btn');
// 循环禁用每一个按钮
allOptionBtns.forEach(btn => btn.disabled = true);

这样不管你点哪个按钮，都会找到页面上所有的选项按钮，然后把它们全部禁用，完美解决你的需求。

方法二：提前存储按钮引用（性能更优） #

如果你的测验选项很多，每次点击都去DOM里查找所有按钮可能有点小损耗，那可以在创建按钮的时候就把它们存到一个数组里，之后直接用这个数组来操作：

1. 先在循环外面定义一个空数组，用来存所有按钮：

let score = 0;
const optionButtons = []; // 新增数组存储按钮引用

2. 在创建每个option按钮后，把它push到数组里：

option.classList.add('opt-btn');
option.textContent = `${x}`;
optionButtons.push(option); // 把当前按钮存入数组

3. 最后在点击事件里，循环这个数组禁用所有按钮：

// 替换原来的option.disabled = true;
optionButtons.forEach(btn => btn.disabled = true);

这种方法不用再去DOM中查询元素，直接用我们提前保存的按钮引用，性能会更好一些，尤其是选项数量多的时候。

给你整理好的完整代码（方法一版本） #

const obj = {
    id:1,
    correctAns : "Three",
    opt:["One","Two","Three","Four"],
    question:"There are how many sides in a triangle?"
}
let quesElement = document.getElementById('ques');
let optionsElement = document.getElementById('options');
let scoreElement = document.getElementById('score');
let heading = document.createElement('h2');
heading.textContent=`${obj.question}`;
quesElement.appendChild(heading);
let ans;
let score = 0;
obj.opt.forEach((x)=>{
    let button_div = document.createElement('div');
    let option = document.createElement('button');
    option.classList.add('opt-btn');
    option.textContent = `${x}`;
    button_div.appendChild(option);
    options.appendChild(button_div);
    option.addEventListener('click',()=>{
        if(x==obj.correctAns){
            score+=1;
        }
        // 替换成获取所有按钮并禁用的代码
        const allOptionBtns = document.querySelectorAll('.opt-btn');
        allOptionBtns.forEach(btn => btn.disabled = true);
        console.log(score);
        scoreElement.textContent = `Score: ${score}`
    });
})

这样修改后，你点击任何一个选项按钮，所有的选项按钮都会被禁用啦，试试看吧！

备注：内容来源于stack exchange，提问作者Anjali Patel