嘿，这个答题App的交互需求很清晰，我来给你分享下具体的实现方案，不管是原生JS还是主流框架都能套用这个核心逻辑～

其实就是两个关键交互的处理：

• 点击任意选项按钮时：遍历所有选项，将除当前点击按钮外的其余3个按钮设置为禁用状态
• 点击下一题按钮时：重置所有选项按钮的可点击状态，为下一轮答题做准备

先搭好基础的HTML结构：

<!-- 选项按钮组 -->
<div class="options-container">
  <button class="option-btn">选项A</button>
  <button class="option-btn">选项B</button>
  <button class="option-btn">选项C</button>
  <button class="option-btn">选项D</button>
</div>
<!-- 下一题按钮 -->
<button id="next-question-btn">下一题</button>

然后写JavaScript逻辑：

// 获取DOM元素
const allOptionBtns = document.querySelectorAll('.option-btn');
const nextBtn = document.getElementById('next-question-btn');

// 绑定选项点击事件
allOptionBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 遍历所有选项，禁用当前点击之外的按钮
    allOptionBtns.forEach(optBtn => {
      if (optBtn !== btn) {
        optBtn.disabled = true;
        // 可以加样式区分禁用状态，提升用户体验
        optBtn.classList.add('disabled');
      }
    });
  });
});

// 绑定下一题点击事件
nextBtn.addEventListener('click', () => {
  // 恢复所有选项的可点击状态
  allOptionBtns.forEach(btn => {
    btn.disabled = false;
    btn.classList.remove('disabled');
  });
  // 这里还可以添加加载下一题的逻辑，比如更新选项文本、重置答题状态等
});

再补个CSS优化禁用状态的样式，比直接操作DOM样式更规范：

.option-btn {
  padding: 8px 16px;
  margin: 0 8px;
  cursor: pointer;
}

.option-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #eee;
}

如果是用React开发，核心逻辑不变，只是用状态来控制按钮的禁用：

import { useState } from 'react';

function QuizComponent() {
  // 用数组存储每个选项的禁用状态，初始都为false（可点击）
  const [isOptionDisabled, setIsOptionDisabled] = useState([false, false, false, false]);

  // 处理选项点击
  const handleOptionClick = (clickedIndex) => {
    // 更新状态：当前点击的选项保持可点击，其余设为禁用
    const newDisabledState = isOptionDisabled.map((_, index) => index !== clickedIndex);
    setIsOptionDisabled(newDisabledState);
  };

  // 处理下一题点击
  const handleNextQuestion = () => {
    // 重置所有选项为可点击状态
    setIsOptionDisabled([false, false, false, false]);
    // 这里加入加载新题目、清空答题记录等逻辑
  };

  return (
    <div className="quiz-container">
      <div className="options-group">
        {['选项A', '选项B', '选项C', '选项D'].map((option, index) => (
          <button
            key={index}
            disabled={isOptionDisabled[index]}
            onClick={() => handleOptionClick(index)}
            className={`option-btn ${isOptionDisabled[index] ? 'disabled' : ''}`}
          >
            {option}
          </button>
        ))}
      </div>
      <button onClick={handleNextQuestion} className="next-btn">下一题</button>
    </div>
  );
}

Vue的实现思路和React类似，用data里的数组控制按钮的disabled属性，在方法里更新状态即可，这里就不展开啦～

内容的提问来源于stack exchange，提问作者Irfan Shaikh