如何防止用户多次点击按钮？

Question

我想防止用户重复点击提交按钮。我尝试了一些在stackoverflow上针对类似问题的解决方案。

例如：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
    $('<% =btnUpload.ClientID %>').click(function () { this.disabled = true });
</script>

我也尝试过...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
  $("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
  });
</script>

并且尝试在主页面上进行了测试

<form onsubmit="if(submitted) return false; submitted = true; return true">

但是没有用.. 我仍然能够点击按钮多次。

标记:

<asp:Button ID="btnUpload" runat="server" class="blue-button" 
CssClass="ButtonText"OnClick="btnUpload_Click"
 OnClientClick="if (!confirm('Are you sure that you want to Save entered details ?'))
 return false;return doCustomValidate(event,true);"
     Text="Save" />

请注意，我正在使用主页面。

- SamuraiJack

---

一旦表单提交，页面可能会重新加载，您将重新开始，所有的JavaScript都将丢失。 - adeneo

不相关，但为了方便使用JS/jQuery，将您的按钮控件ClientIDMode设置为“Static”，然后在jQuery中可以使用标准引用：$('#btnUpload')。 - fnostro

为什么不在代码后端（.cs文件）禁用诸如按钮单击事件之类的逻辑？ - Ajay

Answer 1

如果您希望用户只点击一次按钮，请使用.one()来附加事件。

JQuery网址：http://api.jquery.com/one/

- HamidRaza

Answer 2

在它上面添加一个disabled属性。

$('#<% =btnUpload.ClientID %>').click(function () {
    $(this).prop("disabled", true);
});

- Jake 404

Answer 3

您在<% =btnUpload.ClientID %>之前的id中漏掉了#，请在其前面添加，例如：

$(function(){
    $('#<% =btnUpload.ClientID %>').click(function () {
        this.disabled = true;
    });
});

如果您希望只添加一次点击事件，则可以使用one()，例如：

$(function(){
    $('#<% =btnUpload.ClientID %>').one('click',function () {
        // your code on click event
    });
});

如果你的 id 改变（渲染后的 Clientid 改变），那么尝试使用 class selector，例如：

$(function(){
    $('.ButtonText').click(function () {
        this.disabled = true;
    });
});

- Rohan Kumar

Answer 4

在javascript中设置一个名为count的变量，将其初始值设为0。在.click()事件监听器中检查条件。If条件为0，则允许执行代码并将计数器增加1。Else返回false。

var count = 0;
$('#<% =btnUpload.ClientID %>').click(function () {
    if (count == 0) {
        count++;
        return true;
    } else {
        return false;
    }
});

- CJ Ramki