禁用按钮仍然使用“.click()”触发答案

【问题标题】：Disabled button still fires using ".click()"禁用按钮仍然使用“.click()”触发
【发布时间】：2015-01-29 11:03:00
【问题描述】：

似乎禁用按钮“onclick”功能在以编程方式触发时仍会触发，例如：

<div>
   <input type="button" onclick="save()" id="saveButton"    value="save"  disabled="disabled" />
   <input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>

function save(){
    var count = parseInt($('#counter').html());
    $('#counter').html(++count);
}
function byPassDisabled(){
     $('#saveButton').click();   
}

见http://jsfiddle.net/WzEvs/363/

在我的情况下，键盘快捷键绑定到触发按钮上的“.click()”的函数。我会发现必须禁用快捷方式或检查按钮是否自己被禁用非常烦人。我更喜欢解决此问题的通用解决方案。

但是为什么呢？这种行为对我来说似乎不公平。
有什么解决方法吗？

【问题讨论】：

感谢您的宝贵意见。我只是相信这不是预期的行为，仅此而已。或者，我可以使用 $('#saveButton:enabled').click();而是。
首先，不要使用内联处理程序。你的按钮有 id。使用 jquery 绑定事件处理程序$('#id').click(blah)。其次，不要模拟事件来触发另一个功能。 function tryToSave() {if(currentStateAllowYouToSave) save();}.
1.我正在使用角度 ng-click 来绑定保存功能，我不能使用 id 来绑定它。 2. 键盘快捷键用于触发按钮。 3. 我不想检查按钮状态，这很麻烦
嗯，没有 Angular 库来处理键盘快捷键，是吗？
ngmodules.org/modules/angular-hotkeys

标签： javascript jquery

【解决方案1】：

该属性仅禁用用户交互，按钮仍可通过编程方式使用。

所以是的，你必须检查

function byPassDisabled(){
    $('#saveButton:enabled').click();   
}

或者，不要使用内联处理程序。

$(document).on('click', '#saveButton:enabled', function(){
    // ...
});

【讨论】：

:not(:disabled) 可以简写为 :enabled
是的，谢谢。过于专注于禁用检查：D
其实我用的是angular ng-click。
“点击”是不是用户交互吗？

【解决方案2】：

为了将来的使用...OP 代码可以工作，因为即使 DOM 元素被禁用，jQuery 仍然会调用它自己的处理程序。如果要使用 vanilla javascript，则会使用 disabled 属性。

const element = document.getElementById('saveButton');
element.click() //this would not work

【讨论】：

这是正确的，感谢您发布此信息。我在使用 React 时遇到了类似的问题，并且对与 jQuery 相关的帖子的数量感到困惑，这些帖子表明我的禁用按钮在使用 .click() 时仍然处于活动状态，尽管事实上我在我的代码和禁用的按钮未触发。

【解决方案3】：

您可以以编程方式触发对禁用按钮的点击。

有一些方法可以确定事件是用户点击按钮还是以编程方式触发。 http://jsfiddle.net/WzEvs/373/

$(function () {
    $("#saveButton").on('click', function (e) {
        if (!e.isTrigger) {
            var count = parseInt($('#counter').html());
            $('#counter').html(++count);
        }
    });
    $("#bypassButton").on('click', function (e) {
        $("#saveButton").click();
    });
});

如果您以编程方式调用click()，则e.isTrigger 为真。基本上你是在代码中手动触发点击事件。

【讨论】：

Spokey 的解决方案要简单得多。
我同意，但这可能符合我们想要确定是用户点击还是触发点击的要求:)

【解决方案4】：

您仍然可以触发click，尽管它是disable。正如 Spokey 所说，它只是显示了用户交互（可用性仍然存在，可以通过编程方式打开）。 off 或unbind 点击即可解决此问题。

谢谢

【讨论】：