使用 ASP.NET 向导模板中的 jQuery 提交按钮禁用答案

【问题标题】：Disable with jQuery submit button in ASP.NET Wizard Template使用 ASP.NET 向导模板中的 jQuery 提交按钮禁用
【发布时间】：2012-02-14 12:21:58
【问题描述】：

我有一个使用 向导模板控件的 ASP.NET Web 窗体应用程序。

在我的向导中有四个页面（表单），我想使用 jQuery 来禁用最后一页上的提交按钮（其他页面上的按钮只是 下一个和上一个）我想这样做是为了防止用户在按钮上单击更多次，导致表单被多次提交。

“问题”是无法将 ID 分配给提交按钮，因为它们是自动生成的（我已明确要求不要修改此行为）。

我试过这个 jQuery 但它不起作用：

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

其中form1 是包装向导的表单的ID。有人可以帮忙吗？

【问题讨论】：

标签： jquery asp.net onsubmit aspwizard

【解决方案1】：

您在选择器中缺少form1 之前的#。
你还没有定义e
return false 会做一个 preventDefault，两者都不需要

编辑：

将按钮上的CssClass-属性设置为submitbutton

$('.submitbutton').click(function(){
    $(this).prop('disabled', true);
});

或者在你的例子中，我认为这样的事情会起作用

$(this).find(':submit').prop('disabled', true);

【讨论】：

谢谢。请参阅代码更新。也不是这样的
@CiccioMiami 为什么不在按钮的点击事件中处理呢？生病更新一个例子
我在 jsfiddle 中实现了您的解决方案，看看。 jsfiddle.net/79kXz
@CiccioMiami 出于某种原因，prop 在提交按钮上不起作用。试试这个jsfiddle.net/79kXz/3
没什么...这让我很头疼，我尝试了提琴手、萤火虫、检查员...什么都没有

【解决方案2】：

我找到了解决方案。这不是一个整洁的方法，但是当您处理 ASP.NET Web 窗体提供的杂乱控件时，大多数时候变通方法是唯一可能的解决方案。

第一步是禁用自动生成完成按钮，然后在向导底部附加：

<FinishNavigationTemplate>
        <table cellpadding="3" cellspacing="3">
         <tr>
            <td>
               <asp:Button ID="btnPrevious" runat="server" Text="Previous"
                           CausesValidation="false" 
                           CommandName="MovePrevious"
                           CssClass="buttonStyle"/>
            </td>
            <td>
               <asp:Button ID="btnFinish" runat="server" Text="Finish"
                           onClientClick="this.disabled = true; this.value =  'Submitting...';  
                           this.className = 'buttonStyleDisabled';"   
                           UseSubmitBehavior="false"  
                           CausesValidation="true" 
                           CommandName="MoveComplete"
                           CssClass="buttonStyle"/>
            </td>  
          </tr>
        </table>
</FinishNavigationTemplate>

更新：

要删除自动生成的完成按钮，只需从向导中删除 <FinishCompleteButtonStyle> 标记

【讨论】：