如何在条件语句中使用JS-Cookie实现测验按钮点击后禁用

核心思路 #

要实现按钮点击一次后禁用，关键是在页面加载完成时就检测Cookie状态，根据Cookie是否存在来决定按钮的行为：

• 若Cookie已存在（说明用户之前点击过）：禁用按钮的点击功能，同时添加视觉上的禁用样式
• 若Cookie不存在：绑定正常的点击事件，点击后设置Cookie并执行原有逻辑

修正后的代码实现 #

// 页面加载完成后执行检测
document.addEventListener('DOMContentLoaded', function() {
    const start_btn = document.getElementById('start_btn');
    const info_box = document.getElementById('info_box');

    // 检测Cookie状态
    if (Cookies.get('completedquiz') === 'true') {
        // 禁用按钮：阻止点击+添加视觉禁用效果
        start_btn.disabled = true;
        start_btn.classList.add('disabled'); // 需配合对应CSS样式
        start_btn.onclick = () => false;
    } else {
        // 绑定正常点击事件
        start_btn.onclick = () => {
            info_box.classList.add("activeInfo");
            // 设置有效期7天的Cookie
            Cookies.set('completedquiz', 'true', { expires: 7 });
            // 点击后立即禁用按钮避免重复操作
            start_btn.disabled = true;
            start_btn.classList.add('disabled');
        };
    }
});

常见问题排查 #

1. Cookie检测失效：确保JS-Cookie库已正确引入，且设置Cookie时明确指定值为'true'（若未指定值，Cookies.get会返回undefined，导致判断失效）。
2. 元素获取失败：必须在DOM加载完成后再获取按钮和信息框元素，否则会因元素未渲染导致后续代码无法执行。
3. 视觉反馈缺失：仅阻止点击事件不够，建议添加disabled属性和对应CSS样式，让用户直观感知按钮状态。

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