怎样用jQuery实现单选按钮点击后禁用全部选项并高亮对错

本文详解如何使用 jquery 在 trivia 小测验中实现：点击任一答案按钮后立即禁用所有按钮，同时根据正确性将正确答案设为绿色、错误答案设为红色，并动态更新文本提示。

本文详解如何使用 jquery 在 trivia 小测验中实现：点击任一答案按钮后立即禁用所有按钮，同时根据正确性将正确答案设为绿色、错误答案设为红色，并动态更新文本提示。

在构建交互式小测验（如 CSS 基础问答）时，良好的用户体验要求：仅允许一次作答、即时反馈对错、视觉清晰区分结果。jQuery 是实现该逻辑的简洁方案——无需原生 DOM API 手动遍历，一行选择器即可批量操作。

以下为完整、可直接运行的 jQuery 解决方案（基于你提供的 HTML 结构）：

✅ 核心逻辑说明

• 使用事件委托（绑定到 .answer-btns 容器），避免为每个按钮重复绑定；
• 点击后：禁用全部按钮 → 识别正确答案（.btn-valid） → 差异化样式与文本更新；
• 严格遵循“只允许一次作答”原则，防止重复点击干扰状态。

? 完整 jQuery 代码（含注释）

$(document).ready(function() {  // 事件委托：监听 .answer-btns 内所有 button 的点击  $('.answer-btns').on('click', 'button', function() {    const $clickedBtn = $(this);    const $allButtons = $('.answer-btns button');    // 1. 立即禁用所有按钮（防止重复点击）    $allButtons.prop('disabled', true);    // 2. 判断点击项是否为正确答案（依据 class="btn-valid"）    if ($clickedBtn.hasClass('btn-valid')) {      // 正确：绿色背景 + 显示 "Correct!"      $clickedBtn.css('background-color', '#4CAF50').text('✓ Correct!');      // 其他按钮设为浅灰（非错误态，仅表示已禁用）      $allButtons.not($clickedBtn).css('background-color', '#e0e0e0');    } else {      // 错误：红色背景 + 显示 "Incorrect"      $clickedBtn.css('background-color', '#f44336').text('✗ Incorrect');      // 同时高亮唯一正确答案（绿色），其他错误项保持默认灰底      const $correctBtn = $('.answer-btns .btn-valid');      $correctBtn.css('background-color', '#4CAF50').text('✓ Correct!');      // 可选：为错误按钮添加轻微抖动效果增强反馈（需 CSS 支持）      $clickedBtn.addClass('shake');    }  });});

? 配套 CSS 建议（提升体验）

/* 按钮基础样式 */.btn, .btn-valid {  margin: 8px 4px;  padding: 10px 16px;  border: none;  border-radius: 4px;  background-color: #f5f5f5;  cursor: pointer;  transition: all 0.2s ease;}/* 禁用状态统一灰阶 */.btn:disabled, .btn-valid:disabled {  opacity: 0.7;  cursor: not-allowed;}/* 错误点击抖动动画（可选） */@keyframes shake {  0%, 100% { transform: translateX(0); }  25% { transform: translateX(-3px); }  50% { transform: translateX(3px); }  75% { transform: translateX(-3px); }}.shake {  animation: shake 0.5s ease-in-out;}

⚠️ 关键注意事项

• ID 唯一性问题：你 HTML 中多个 <button id="q1-btn"> 违反 HTML 规范（ID 必须唯一）。请改用 class="q1-btn" 或移除 ID，否则 jQuery 选择器可能行为不可预测。
• 语义化建议：如需支持键盘导航或无障碍访问，推荐进阶方案——用 <input type="radio"> + <label> 替代按钮（答案中已提及），再通过 CSS 隐藏 radio 并美化 label。但当前 jQuery 方案已满足基础需求。
• 扩展性设计：若页面含多道题（如 #q2, #q3），可将选择器泛化为 $('.question1 .answer-btns') 或添加 data-question-id 属性，实现批量初始化。

✅ 总结

本方案以最少代码达成三大目标：防重复提交（禁用全部）、精准反馈（红/绿区分）、即时响应（文本更新）。它结构清晰、兼容性强，是 jQuery 小测验交互的经典实践。下一步可结合计分逻辑或自动跳转下一题，让 trivia 游戏更完整。