使用JavaScript禁用点击后按钮，设置disabled=true无效如何解决

步骤1：修改JavaScript交互逻辑 #

直接操作你传入函数的按钮实例el即可，不需要额外通过id查询，在发起请求前直接设置禁用状态，避免重复触发：

function baadimaal(str,el) {
    // 点击后立即禁用按钮，阻止重复触发
    el.disabled = true;
    // 可选：添加自定义禁用样式类，强化视觉效果
    el.classList.add('disabled-btn');

    var x = el.value
    var id = el.getAttribute("id")
    
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("container"+id).innerHTML = this.responseText;
        // 如果请求完成后需要恢复按钮可用，可在这里添加 el.disabled = false; el.classList.remove('disabled-btn');
    }
    // 可选：如果请求失败需要恢复按钮可用，可以添加以下回调
    // xhttp.onerror = function() {
    //     el.disabled = false;
    //     el.classList.remove('disabled-btn');
    // }
    xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "&para=" + x + "&i=" + id);
    xhttp.send();
}

步骤2：可选添加自定义禁用视觉样式 #

在你的CSS文件中加入以下代码，自定义禁用状态的外观：

button:disabled, .disabled-btn {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #999;
}

生效说明 #

你之前设置disabled不生效的核心原因大概率是使用document.getElementById("id")时把参数写成了固定字符串"id"，没有替换为实际的按钮id值，直接操作传入的el实例可以完全规避这个问题，逻辑更简洁也不会出错。

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