单击一次后禁用按钮

IT技术 javascript jquery asp.net-mvc
2021-03-03 00:02:58

我需要在单击后禁用按钮,以便用户不能多次单击它。(我的应用程序是用 MVC ASP.NET 编写的,我已经在一个普通的 ASP.NET 应用程序中完成了这个。)

我尝试使用 JavaScript 和 jQuery,但它不起作用。该按钮被禁用,但未提交表单。

jQuery:

$("#ClickMe").attr("disabled", "disabled"); 

JavaScript:

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';
}

这两种方法都很好用,但现在表单无法提交。

6个回答

jQuery 现在具有将.one()任何给定事件(例如“提交”)限制为一次的功能。

例子:

$('#myForm').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled','disabled');
});

此代码将让您提交一次表单,然后禁用该按钮。将 find() 函数中的选择器更改为您想要禁用的任何按钮。

注意:根据Francisco Goldenstein,我已将选择器更改为要提交的表单和事件类型。这允许您从任何地方(按钮以外的地方)提交表单,同时仍然禁用提交按钮。

注意 2:根据 gorelog,使用attr('disabled','disabled')将阻止您的表单发送提交按钮的值。如果要传递按钮值,请attr('onclick','this.style.opacity = "0.6"; return false;')改用。

@gorelog 我已经添加了关于如何避免您提出的问题的注释,谢谢!
2021-04-18 00:02:58
如果我使用 get(), $('#error').hide() 会发生什么;发回错误?
2021-05-03 00:02:58
button[type="submit"]应该添加到选择器中。(当然是通用代码)。
2021-05-09 00:02:58
只是关于此方法的说明。它会阻止按钮的值被提交到 POST。所以类似的东西<input type="submit" name="cmd" value="Delete"/>不会将“cmd”的值发送到 POST。
2021-05-10 00:02:58
如果我明白你在问什么,上面的代码比手动隐藏整个按钮然后取消隐藏错误消息要少得多。
2021-05-15 00:02:58

如果在用户单击按钮后立即设置 disabled="disabled" 并且表单因此没有提交,您可以尝试两件事:

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled  

尽管老实说,我打赌会有比那更好的方法来做到这一点。

Itz 感谢您的帮助 simple sloution 非常感谢 .. 效果很好!!!无论如何,我也愿意寻求更好的解决方案
2021-04-20 00:02:58
你不需要这样做吗?setTimeout(function () { disableFunction }, 1);
2021-05-05 00:02:58

jQuery.one()不应与单击事件一起使用,而应与如下所述的事件一起使用submit

 $('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });

要在 MVC NET Core 中提交表单,您可以使用INPUT提交

<input type="submit" value="Add This Form">

为了使它成为一个按钮,我使用 Bootstrap 例如:

<input type="submit" value="Add This Form" class="btn btn-primary">

为了防止在 MVC NET Core 中发送重复的表单,您可以添加onclick事件,并使用this.disabled = true; 禁用按钮:

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

如果您想先检查表单是否有效然后禁用按钮,请添加this.form.submit(); 首先,如果表单有效,则此按钮将被禁用,否则仍将启用按钮以允许您在验证时更正表单。

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

您可以向禁用的按钮添加文本,说明您现在正在发送表单,当所有验证都正确时使用this.value='text';

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = 'Submitting the form';">
这个答案是迄今为止最好的答案 - 效果很好;)
2021-05-05 00:02:58
$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

选择按钮并通过其 id 或文本或类...它只是在第一次点击后禁用并在 20 毫秒后启用

非常适用于回传并将其放置在母版页中,适用于所有按钮而无需隐式调用 onclientClick