已禁用按钮仍会侦听单击事件

我在一个表格中遇到问题，我会进行一些jqueryvalidation。 如果未填写特定输入字段，则应通过添加禁用属性来禁用“前进”按钮：

if errors $('.btn-move-forward').attr("disabled", true) 

虽然有效，但我在该按钮上也有一个点击事件：（coffeescript）

 $('.btn-move-forward').click -> $('#step2, #step3').toggle() 

我希望.btn-move-forward在按钮被禁用时不会触发click事件，但确实如此！

第一：我不明白为什么，因为每个浏览器规范都定义了这不应该发生。 无论如何，我试图通过做以下事情绕过它：

 $('.btn-move-forward').click -> if !$(this).is(:disabled) $('#step2, #step3').toggle() 

或这个

 $('.btn-move-forward').click -> if $(this).prop("disabled", false) $('#step2, #step3').toggle() 

或者像这样组合事件监听器：

 $('.btn-move-forward').on 'click', '.btn-move-forward:enabled', -> $('#step2, #step3').toggle() 

不，所有这些都无法正常工作。 该按钮仍然表现为前进按钮。

如果它被禁用，我想要的是没有收听onclick的按钮。

Answer 1

disabled属性仅适用于表单元素。 这意味着除非.btn-move-forward元素是或否则disabled属性将不起作用。

您可以在此处使用button查看工作示例：

 $('.btn-move-forward').prop("disabled", true).click(function() { console.log('Moving forward...'); }) 

  Move forward 

Answer 2

请关闭点击事件

 $('.btn-move-forward').off('click'); 

Answer 3

将其更改为使用prop()代替。

 $('.btn-move-forward').prop("disabled", true) 

Answer 4

禁用：

 $('.btn-move-forward').prop("disabled", true); 

重新启用：

 $('.btn-move-forward').removeClass('disabled'); // do this also. $('.btn-move-forward').prop("disabled", false);