Javascript 单击一次后禁用按钮

Disabling the button after once click

提问by batwadi

I need to disable a button once it's clicked so the user can't click it more than once. (My application is written in MVC ASP.NET, I've done this in a normal ASP.NET application.)

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

I tried using JavaScript and jQuery and it's not working. The button is getting disabled but the form is not being submitted.

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

jQuery:

jQuery：

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

JavaScript:

JavaScript：

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

Both methods work great, but now the form won't submit.

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

回答by Preston Badeer

jQuery now has the .one()function that limits any given event (such as "submit") to one occurrence.

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

Example:

例子：

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

This code will let you submit the form once, then disable the button. Change the selector in the find() function to whatever button you'd like to disable.

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

Note:Per Francisco Goldenstein, I've changed the selector to the form and the event type to submit. This allows you to submit the form from anywhere (places other than the button) while still disabling the button on submit.

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

Note 2:Per gorelog, using attr('disabled','disabled')will prevent your form from sending the value of the submit button. If you want to pass the button value, use attr('onclick','this.style.opacity = "0.6"; return false;')instead.

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

回答by Francisco Goldenstein

jQuery .one()should not be used with the click event but with the submitevent as described below.

jQuery.one()不应与 click 事件一起使用，而应与如下所述的事件一起使用submit。

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

回答by Warty

If when you set disabled="disabled" immediately after the user clicks the button, and the form doesn't submit because of that, you could try two things:

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

Although I honestly bet there will be a better way to do this, than that.

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

回答by Nare Vellela

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

select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec

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

Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick

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

回答by Robert Stepien

To submit form in MVC NET Core you can submit using INPUT:

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

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

To make it a button I am using Bootstrap for example:

为了使它成为一个按钮，我使用 Bootstrap 例如：

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

To prevent sending duplicate forms in MVC NET Core, you can add onclickevent, and use this.disabled = true;to disable the button:

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

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

If you want check first if form is valid and then disable the button, add this.form.submit();first, so if form is valid, then this button will be disabled, otherwise button will still be enabled to allow you to correct your form when validated.

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

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

You can add text to the disabled button saying you are now in the process of sending form, when all validation is correct using this.value='text';:

您可以向禁用的按钮添加文本，说明您现在正在发送表单，当所有验证都正确时使用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';">

回答by Gibolt

Use modern Js events, with "once"!

使用现代 Js 事件，带有“一次”！

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

Documentation, CanIUse

文档, CanIUse

回答by AbdelMoniem

protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }

回答by danial y

think simple

想简单

<button id="button1" onclick="Click();">ok</button>
<script>
    var buttonClick = false;
    function Click() {
        if (buttonClick) {
            return;
        }
        else {
            buttonClick = true;
            //todo
            alert("ok");
            //buttonClick = false;
        }
    }
</script>

if you want run once :)

如果你想运行一次:)

回答by KIBOU Hassan

To disable a submit button, you just need to add a disabled attribute to the submit button.

要禁用提交按钮，您只需要向提交按钮添加一个 disabled 属性。

$("#btnSubmit").attr("disabled", true);

To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

要启用禁用按钮，请将 disabled 属性设置为 false，或删除 disabled 属性。

$('#btnSubmit').attr("disabled", false);

or

或者

$('#btnSubmit').removeAttr("disabled");