jQuery中用addClass添加disabled类后按钮仍可点击，如何实现禁用且不可点击？

这个问题我之前也碰到过！其实核心原因很简单：.disabled类只是给按钮套了个“禁用的样子”，但并没有真正改变按钮的原生交互状态——浏览器只会认原生的disabled属性来阻止点击行为。

要实现「加类+真正禁用」的效果，有两种靠谱的方式：

1. 结合原生disabled属性（推荐） #

既然你的.disabled类负责视觉样式，那我们在加类的同时，顺便设置原生的disabled属性，这样既保留了禁用的视觉效果，又能真正阻止点击：

// 同时添加样式类和设置禁用属性
$(this._eButton).addClass("disabled").prop("disabled", true);

这里用prop()而不是attr()是因为jQuery官方推荐：对于boolean类型的属性（比如disabled、checked），prop()的处理更准确，尤其是在不同jQuery版本里兼容性更好。

2. 通过阻止点击事件实现（不依赖原生属性） #

如果出于某些原因不想用原生disabled属性，那可以给添加了.disabled类的按钮绑定点击拦截逻辑，阻止点击事件的触发：

// 第一步：添加禁用样式类
$(this._eButton).addClass("disabled");

// 第二步：绑定点击拦截事件
$(this._eButton).on('click', function(e) {
    // 检查是否有disabled类
    if ($(this).hasClass('disabled')) {
        e.preventDefault(); // 阻止默认行为（比如表单提交）
        e.stopPropagation(); // 阻止事件冒泡
        return false; // 彻底终止事件处理
    }
});

不过这种方法要注意：如果按钮之前已经绑定了其他点击事件，你需要确保这个拦截事件的绑定顺序在前面，或者用off()先解绑原有事件再重新绑定（避免冲突）。

为什么单独用addClass不行？ #

再啰嗦一句：CSS类的作用范围只限于样式渲染，它不能改变HTML元素的原生行为。浏览器内置的按钮交互逻辑，只会识别disabled这个原生属性来禁用点击、焦点等行为——单纯的样式类做不到这一点哦。

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