【问题标题】:How to disable an ASP.NET Button right after first submit (on the client)?如何在第一次提交(在客户端)后立即禁用 ASP.NET 按钮?
【发布时间】:2015-03-06 04:19:44
【问题描述】:

我有一个提交按钮。单击此按钮后,表单将被提交。我想防止用户多次点击它。所以 OnClientClick

我正在使用这样的禁用按钮的功能,

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

但现在的问题是我的表单没有被提交。

即使我从我的 javascript 函数返回 true。以下是我的javascript函数

 function ab() {

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

        return true;
    }

我也在使用母版页。

【问题讨论】:

  • 如果你想提交表单,那么你可以在服务器端使用 .Visible = false; 禁用它
  • 在服务器端禁用只会在调用完成时反映,所以不会起作用@Adil
  • 您正在禁用按钮单击处理程序中的按钮。为什么不禁用表单提交处理程序中的按钮?这将确保表单被提交。
  • 在提交按钮上单击一次时,您已将禁用属性添加到具有 id btn123 的提交按钮。如果您仔细检查 DOM 结构中的元素,您会发现在提交标记中添加了 disabled="disabled"。因此,只需在您提交的内容完成后做一件事,调用另一个函数并在其中添加$("#btn123").attr("disabled", "false");

标签: javascript c# jquery asp.net postback


【解决方案1】:

我认为问题在于它需要绑定到表单的提交。下面的代码将解决这个问题。

$("#formId").submit(function(){
    $("#btn123").attr("disabled", "disabled");
})

【讨论】:

  • 这听起来是个不错的计划,但它对我不起作用——如果按钮在表单的 submit() 事件中被禁用,回发仍然会被阻止。这可能取决于浏览器/版本。
【解决方案2】:

按钮未触发 postBack,因为您已禁用此功能。避免多个 postBack 的方法是并排放置两个按钮。真实的和虚拟的。第一次点击隐藏/删除真实按钮并显示虚拟按钮

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" ClientIDMode="Static" OnClientClick="disableButton();"/>

<asp:Button ID="ButtonDummy" runat="server" Text="Button" ClientIDMode="Static" OnClientClick='return false;' style="display:none;"/>

和 JS:

function disableButton() {

 $("#Button1").hide();

 $("#ButtonDummy").show();

 return true;
 }

【讨论】:

    【解决方案3】:

    对于我认为很常见的事情来说,这令人惊讶地晦涩难懂。如果在单击按钮后禁用该按钮,它将阻止回发。即使@Rajdeep 建议在表单的提交事件中禁用它也对我不起作用。

    我发现最好的方法是设置按钮的 UseSubmitBehavior="false":

    <asp:Button ID="btn123" UseSubmitBehavior="false" OnClientClick="ab()"
        OnClick="btn123_Click" runat="server" />
    

    这将导致服务器修改按钮的 OnClick 事件以包含一个用于启动回发的 javascript 调用,因此它在浏览器中如下所示:

    OnClientClick="ab();__doPostBack('ctl00$btn123','')"
    

    这将导致在调用函数 ab() 后发生回发,即使 btn123 最终被禁用。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-08-23
      • 2015-05-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-30
      • 1970-01-01
      • 2013-06-11
      相关资源
      最近更新 更多