如何用jQuery实现答题按钮点击后禁用所有按钮并设置样式与提示

第一步：修正HTML的ID问题 #

你的HTML里所有按钮使用了重复的id="q1-btn"，这违反了HTML规范（ID必须唯一），先修改为唯一ID，同时新增提示文本容器：

<div class="container">
    <section id="q1" class="question1">
        <h2 class="question-text">What does CSS stand for?</h2>
        <!-- 用于显示对错提示的容器 -->
        <div class="feedback"></div>
        <div class="answer-btns">
            <button id="q1-btn1" class="btn">Computer Style Sheets</button>
            <button id="q1-btn2" class="btn">Colorful Style Sheets</button>
            <button id="q1-btn3" class="btn btn-valid">Cascading Style Sheets</button>
            <button id="q1-btn4" class="btn">Creative Style Sheets</button>
        </div>
    </section>
</div>

第二步：完整jQuery实现代码 #

$(document).ready(function() {
    // 给所有答题按钮绑定点击事件
    $('.answer-btns .btn').on('click', function() {
        const $allBtns = $('.answer-btns .btn');
        
        // 1. 禁用所有答题按钮
        $allBtns.prop('disabled', true);
        
        // 判断当前点击的按钮是否为正确答案
        const isCorrect = $(this).hasClass('btn-valid');
        
        // 2. 给正确/错误按钮设置背景色
        $allBtns.each(function() {
            $(this).css('background-color', $(this).hasClass('btn-valid') ? 'green' : 'red');
        });
        
        // 3. 显示对应的提示文本
        if (isCorrect) {
            $('.feedback').text('正确！').css('color', 'green');
        } else {
            $('.feedback').text('错误！').css('color', 'red');
        }
    });
});

代码说明 #

• $(document).ready()：确保DOM完全加载后再执行代码，避免找不到元素的问题
• $allBtns.prop('disabled', true)：通过修改按钮的disabled属性，一次性禁用所有答题按钮
• 遍历所有按钮，根据是否带有btn-valid类，分别设置绿色（正确）和红色（错误）背景
• 利用新增的.feedback容器显示对错提示，同时用颜色强化视觉反馈

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