如何禁用按钮但保留默认样式（非置灰）？需用原生JavaScript实现

直接设置disabled=true会触发浏览器默认的置灰样式，要避免这个效果，你可以用以下两种原生JS方案：

方案1：用自定义状态替代disabled属性 #

这种方法不依赖原生disabled属性，而是通过添加自定义类标记状态，并阻止按钮的交互事件：

function disableAnswers() {
    for (let i = 0; i < answers.length; i++) {
        // 添加自定义类标记已禁用状态
        answers[i].classList.add('is-disabled');
        // 绑定点击阻止事件
        answers[i].addEventListener('click', preventClick);
        // 绑定键盘触发阻止事件（回车/空格会触发按钮默认行为）
        answers[i].addEventListener('keydown', preventKeyTrigger);
    }
    nextQ.classList.remove('hidden');
}

// 阻止点击事件的回调
function preventClick(e) {
    e.preventDefault();
    e.stopPropagation();
}

// 阻止键盘触发按钮的回调
function preventKeyTrigger(e) {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        e.stopPropagation();
    }
}

如果后续需要恢复按钮可用状态，执行以下逻辑即可：

function enableAnswers() {
    for (let i = 0; i < answers.length; i++) {
        answers[i].classList.remove('is-disabled');
        answers[i].removeEventListener('click', preventClick);
        answers[i].removeEventListener('keydown', preventKeyTrigger);
    }
}

方案2：覆盖disabled的默认CSS样式 #

如果你一定要保留disabled属性，可通过CSS强制覆盖浏览器的置灰样式，维持按钮原有外观：

button:disabled {
    /* 继承非禁用状态的颜色、背景色、边框色 */
    color: inherit;
    background-color: inherit;
    border-color: inherit;
    /* 移除默认的半透明效果 */
    opacity: 1;
    /* 可选：设置禁用时的光标样式 */
    cursor: not-allowed;
}

JS代码可以保留你原本的实现：

function disableAnswers() {
    for (let i = 0; i < answers.length; i++) {
        answers[i].disabled = true;
    }
    nextQ.classList.remove('hidden');
}

注意：不同浏览器对disabled按钮的默认样式存在细微差异，若出现样式偏差，可针对性补充浏览器私有属性进行覆盖。

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