如何禁用特定类下的提交按钮答案

【问题标题】：How to disable a submit button that is under a specific class如何禁用特定类下的提交按钮
【发布时间】：2013-11-21 20:55:30
【问题描述】：

我的所有 asp.net Web 应用程序上都有以下提交按钮，用于创建或编辑记录：-

<input type="submit" value="Save" class="btn btn-primary"/>

但是我需要编写一个 jQuery 以在用户单击按钮后禁用该按钮（以避免对外部系统的连续 API 调用）。所以我写了这段代码，但是按钮一旦点击就不会被禁用。

  $(".btn btn-primary").click(function () {
            $("input[type=submit]").attr("disabled", "disabled");
            $("input[type=submit]").css("background-color", "grey");
        });

第二个问题我应该遵循哪种方法，以防我需要在单击提交按钮后再次重新启用该按钮以防出现模型状态错误。谁能给点建议

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试这个：

$(".btn.btn-primary").click(function () {
    $("input[type=submit]").attr("disabled", "disabled");
    $("input[type=submit]").css("background-color", "grey");
    return false;
});

【讨论】：

这将涵盖我单击提交按钮后禁用提交按钮的第一个要求。但是如果用户单击提交按钮，然后发生客户端验证错误（例如缺少必填字段），那么即使用户更正客户端验证错误，按钮也会保持禁用状态......

【解决方案2】：

你的选择器错误

$(".btn.btn-primary").click(function () {
    $(this).prop("disabled", "disabled").css("background-color", "grey");
});

this

【讨论】：

但是如果用户点击提交按钮，然后发生客户端验证错误（例如缺少必填字段），在这种情况下按钮将保持禁用状态，即使用户更正客户端验证错误...请您指教
@JohnJohn 你在使用 jQuery 验证吗？
@JohnJohn 在你的 jQuery 验证器中 submitHandler: function(form) { $(".btn.btn-primary").prop("disabled", "disabled").css("background-color", "grey"); }

【解决方案3】：

改变这个

$(".btn btn-primary").click(function () {
            $("input[type=submit]").attr("disabled", "disabled");
            $("input[type=submit]").css("background-color", "grey");
        });

为

    $(".btn .btn-primary").click(function (e) {

                $(this).attr({disabled:true});
                $("input[type=submit]").css("background-color", "grey");
            });

【讨论】：

【解决方案4】：

以上解决方案均未考虑表单提交是否成功。如果用户忘记填写必填字段怎么办？她会收到一条错误消息，尝试更正错误，然后发现她无法重新提交表单。即使您解决了该问题，一旦用户刷新页面，她也可以再次提交。

表格的目的是什么？例如，如果它是一个注册表单，我会在输入电子邮件地址后简单地触发一个 Ajax 方法，该方法会检查数据库中的电子邮件地址并阻止用户尝试两次注册相同的电子邮件地址。另一方面，如果您正在进行调查，并且希望阻止同一用户多次提交，我会创建一个 cookie。在 DOM 准备就绪时，您的脚本将寻找 cookie。如果 cookie 存在，则不显示表单。

【讨论】：

表单的目的是创建新资产和编辑现有资产，有些表单大约有 25 个字段。你是对的，上面的答案都没有考虑表单提交是否成功或是否发生客户端验证错误。这是我主要关心的问题..
@john john - 您绝对可以使用禁用提交的技术。我只想合并我在表单处理程序中提到的一些想法，以便您只有在确定这是正确的行动方案后才这样做。
让您的表单提交触发 JS 验证。如果必填字段不完整显示错误，请不要提交表单。如果没有错误，请通过 Ajax 提交表单。您的表单处理程序可以使用 jQuery 延迟回调，例如 .done() .fail() 和 .always()。由 HTTP 200 响应（成功）触发的 .done() 方法可以禁用表单。我会通过隐藏表单来做到这一点。你也可以做 $('input[type=submit]').attr('disabled', 'disabled');如果您想在页面刷新后设置一个 cookie。在 DOM 就绪时检查 cookie 并在检测到 cookie 时禁用表单。
或者，让您的前端验证调用一个 Ajax 方法，该方法通过执行数据库查找来检查用户是否已经提交了此表单。如果用户已经提交它禁用表单。这比 cookie 方法要好，因为 cookie 可以被删除。当然 cookie 解决方案更容易实现。首先将其分解为 validateForm()、handleFormSubmit() 和 disableForm()。如果您使用 cookie 选项，您也可以执行 setCookie() 和 getCookie() 方法。有一个流行的 jquery 验证插件和一个 jquery cookie 插件。 HTH——尼尔

【解决方案5】：

$(".btn.btn-primary").click(function () {
  $(this).attr('disabled','disabled');
}

【讨论】：

【解决方案6】：

试试

 $(".btn.btn-primary").click(function () {
        $(this).attr("disabled", "disabled")
               .css("background-color", "grey");
        e.preventDefault();

    });

【讨论】：

【解决方案7】：

在稍后阶段重新启用

$("input[type=submit]").removeAttr("disabled");

【讨论】：

但是如果用户单击提交按钮后表单返回错误（客户端），我该如何定义，以再次重新启用按钮？