如何设置网页单选题radio buttons首次选择后不可再选

原生JavaScript实现 #

先构建基础的单选按钮HTML结构，确保所有选项的name属性一致（这是单选功能的核心）：

<div class="quiz-option">
  <input type="radio" name="question1" id="opt1" value="opt1">
  <label for="opt1">选项1</label>
</div>
<div class="quiz-option">
  <input type="radio" name="question1" id="opt2" value="opt2">
  <label for="opt2">选项2</label>
</div>
<div class="quiz-option">
  <input type="radio" name="question1" id="opt3" value="opt3">
  <label for="opt3">选项3</label>
</div>
<div class="quiz-option">
  <input type="radio" name="question1" id="opt4" value="opt4">
  <label for="opt4">选项4</label>
</div>

然后添加JavaScript逻辑，监听单选按钮的change事件，一旦选中某个选项，就禁用同组的所有单选按钮：

// 获取同组的所有单选按钮
const radioButtons = document.querySelectorAll('input[name="question1"]');

// 给每个按钮绑定change事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 禁用当前组的所有单选按钮
    radioButtons.forEach(r => r.disabled = true);
  });
});

关键说明 #

• 当用户选中任意一个单选按钮时，change事件触发，遍历同组所有按钮并设置disabled = true，此时所有按钮都无法再被选中或切换。
• 禁用后浏览器会默认保留已选中按钮的样式，无需额外处理视觉反馈。

可选：jQuery实现（项目已引入jQuery时使用） #

如果你的项目在用jQuery，可使用更简洁的写法：

$('input[name="question1"]').on('change', function() {
  $('input[name="question1"]').prop('disabled', true);
});

内容的提问来源于stack exchange，提问作者Muntasir Sajeeb