单击后禁用按钮。

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中做过这个。网络应用程序)。

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.

这两种方法都很有效，但是现在表单不会提交了。

8 个解决方案

#1

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

jQuery现在具有.one()函数，该函数将给定事件(如“submit”)限制为一个事件。

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，我将选择器更改为要提交的表单和事件类型。这允许您从任何地方(除了按钮之外的地方)提交表单，同时仍然在submit上禁用按钮。

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’)将阻止表单发送submit按钮的值。如果您想传递按钮值，请使用attr('onclick'，'this.style。不透明度= " 0.6 ";返回false;”)。

#2

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:

如果您在用户点击按钮后立即设置为disable =“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.

尽管我敢说肯定会有更好的方法来做这件事。

#3

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

jQuery .one()不应该用于单击事件，而应该用于提交事件。

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

#4

$("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

对于post back n将其放在母版页中非常有效，适用于所有按钮，而不像onclientClick那样隐式调用

#5

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. 
    }

#6

Use modern Js events, with "once"!

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

#7

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 :)

如果你想跑一次:)

#8

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

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

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

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

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

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

or

或

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