单击后禁用该按钮

Question

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

我尝试使用JavaScript和jQuery,但它无法正常工作.该按钮被禁用但表单未提交.

jQuery的:

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

JavaScript的:

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

这两种方法都很有效,但现在表单不会提交.

Answer 1

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;')改用.

Answer 2

如果在用户单击按钮后立即设置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  

虽然我老实说打赌会有更好的方法来做到这一点.

Answer 3

jQuery .one()不应该与click事件一起使用,而是与submit事件一起使用,如下所述.

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

Answer 4

要在 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';">

Answer 5

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

选择按钮并按其 id、文本或类...它会在第一次单击后禁用，并在 20 毫秒后启用

对于回发效果非常好，将其放置在母版页中，适用于所有按钮，而无需隐式调用onclientClick