单击后禁用按钮

Posted 2023-02-22

【中文标题】单击后禁用按钮

【英文标题】：Disabling the button after once click

【发布时间】：2011-01-20 09:42:23

【问题描述】：

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

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

jQuery:

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

JavaScript：

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

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

【问题讨论】：

最好使用布尔类型，而不是字符串，因为字符串 for: 'false' is notNull, well is notFalse => true。

【参考方案1】：

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

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

【讨论】：

Itz 感谢您的帮助 简单的 sloution 非常感谢 .. 效果很好！我也愿意以任何方式寻求更好的解决方案

您不需要这样做吗？ setTimeout(function () disableFunction , 1);

【参考方案2】：

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

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

非常适合回帖 n 将其放在母版页中，适用于所有按钮，而无需像 onclientClick 那样隐式调用

【参考方案3】：

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

例子：

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

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

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

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

【讨论】：

如果我使用 get(), $('#error').hide(); 会发生什么发回错误？

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

只是关于这个方法的一个注释。它将阻止按钮的值被提交到 POST。所以像<input type="submit" name="cmd" value="Delete"/> 这样的东西不会将“cmd”的值发送到 POST。

@gorelog 我已经添加了一条关于如何避免您提出的问题的说明，谢谢！

button[type="submit"] 应该添加到选择器中。 （当然是通用代码）。

【参考方案4】：

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

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

【参考方案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】：

想简单

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

如果你想运行一次:)

【参考方案7】：

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

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

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

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

或

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

【参考方案8】：

使用现代 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

【讨论】：

检查 CanIUse 链接。目前支持 92% 的浏览器

【参考方案9】：

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

【讨论】：

这个答案是迄今为止最好的——效果很好；）

【参考方案10】：

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

【讨论】：

一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。