Javascript 单击一次后禁用按钮

我需要禁用一个按钮，一旦它被点击，所以用户不能点击它超过一次。（我的应用程序是用MVC ASP.NET编写的，我是在普通的ASP.NET应用程序中编写的。）

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

jQuery：

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

JavaScript:

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

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

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

尽管我敢打赌，有更好的方法来做到这一点，而不是那样

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

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

非常适用于回发，将其放在母版页中，应用于所有按钮而无需隐式调用，如

onclientClick

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

例如：

$('#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；”）

。

jQuery

.one（）

不应与click事件一起使用，而应与

submit

事件一起使用，如下所述

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

简单想想

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

ok
var buttonClick=false；
函数单击（）{
如果（按钮单击）{
返回；
}
否则{
buttonClick=true；
//待办事项
警报（“正常”）；
//buttonClick=false；
}
}

---

如果要运行一次：）

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

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

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

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

或

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

---

，

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

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

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

为了使其成为一个按钮，我正在使用引导，例如：

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

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

Itz感谢您的帮助简单的解决方案非常感谢。。它工作得很好！！！不管怎样，我也愿意寻求更好的解决方案。你不需要这样做吗？setTimeout（函数（）{disableFunction}，1）；如果使用get（），$（'#error'）.hide（）会发生什么；发回错误？如果我理解你的要求，上面的代码比手动隐藏整个按钮然后取消隐藏错误消息要简单得多。请注意这个方法。它将阻止按钮的值提交到POST。所以像

这样的东西不会将“cmd”的值发送到POST。@gorelog我已经添加了一个关于如何避免您提出的问题的注释，谢谢<代码>按钮[type=“submit”]应添加到选择器中。（当然是泛型代码）。最好使用布尔类型，而不是字符串，因为'false'的字符串不为null，well is notFalse=>true。这个答案是迄今为止最好的——效果非常好；）检查CanIUse链接。目前支持92%的浏览器

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