点击一次后禁用按钮

Question

我需要在按钮被点击后禁用它，以防止用户多次点击。 （我的应用程序是使用MVC ASP.NET编写的，在普通ASP.NET应用程序中已经做过这个操作）

我尝试使用JavaScript和jQuery，但没有起作用。 按钮被禁用了，但表单没有被提交。

jQuery：

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

JavaScript：

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

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

- batwadi

---

最好使用布尔类型而不是字符串，因为字符串中的“false”不为空，但也不为假 => true。 - Marek Woźniak

在这里查看多个示例： http://www.codingfusion.com/Post/Disable-the-Button-After-One-Click-in-NET-MVC - MaxPayne

这个回答解决了你的问题吗？如何在点击后禁用提交按钮？ - undefined

Answer 1

现在 jQuery 有 .one() 函数，可以将任何给定的事件（如“submit”）限制为一次。

例子：

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

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

注意：根据Francisco Goldenstein的建议，我将选择器更改为表单，并将事件类型更改为submit。这样，您可以从任何地方（不仅是按钮）提交表单，同时在提交时禁用按钮。

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

- Preston Badeer

---

如果我使用get()，$('#error').hide();将错误post回去会发生什么？ - user2178521

如果我理解你的问题，上面的代码比手动隐藏整个按钮然后取消隐藏错误消息要少得多。 - Preston Badeer

关于这种方法，需要注意的是它将防止按钮的值被提交到POST。所以像<input type="submit" name="cmd" value="Delete"/>这样的东西就不会把“cmd”的值发送到POST。 - gorelog

@gorelog，我已经加了一条注释，关于如何避免你提出的问题，谢谢！ - Preston Badeer

应该将 button[type="submit"] 添加到选择器中。（针对通用代码） - COil

@coil 我建议将上面我的代码中的 input 更改为 button，而不是尝试应用于所有输入元素。这只是我的个人看法。:) - Preston Badeer

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  

虽然我真的相信会有比那更好的方法。

- Warty

---

感谢您的帮助，提供简单的解决方案，非常感谢... 它很好地起作用！！！ 无论如何，我也乐意接受更好的解决方案。 - batwadi

你不需要这样做吗？setTimeout(function () { disableFunction }, 1); - Brad8118

Answer 3

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

- Robert Stepien

---

这个答案是迄今为止最好的 - 运行得非常出色;) - monkey

Answer 4

jQuery的.one()方法不应该与click事件一起使用，而是应该像下面描述的那样与submit事件一起使用。

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

- Francisco Goldenstein

Answer 5

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

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

对于提交回发非常有效，在主页中放置，适用于所有按钮，无需像onclientClick那样显式调用。

- Nare Vellela

Answer 6

使用现代的JS事件，包括"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

- Gibolt

---

请查看CanIUse链接。目前有92%的浏览器得到支持。 - Gibolt

Answer 7

您可以将以下代码添加到您的 HTML 中： <input type="submit" onClick="this.disabled = true;" />

该代码会禁用提交按钮，以避免在表单被重复提交时导致问题。

- Ian Jaspers

---

一个好的答案总是会包括解释为什么这样做可以解决问题，这样原帖作者和任何未来的读者都可以从中学习。 - Tyler2P

Answer 8

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

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

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

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

或者

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

- KIBOU Hassan

Answer 9

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

- AbdelMoniem

Answer 10

在处理点击事件的函数内部设置 disabled = true。

document.getElementById(btn.id).disabled = true;

- Joe