使用Javascript單擊時禁用放置在ASP.NET模板內的Button

Question

我有一個ASP.NET Web窗體應用程序。

我的目標是在用戶點擊時禁用提交按鈕btnFinish ，以避免多次提交。

<asp:Button ID="btnFinish" runat="server" Text="Finish" UseSubmitBehavior="false" 
CausesValidation="true" CommandName="MoveComplete" CssClass="buttonStyle"/>

Javascript函數是：

 function Validate(btnFinishId) {

            btnObj = document.getElementById(btnFinishId)

            if (Page_IsValid) {
                btnObj.disabled = true
            }
            else {
                 alert('Page has some validation error');
                 }

            // this is to prevent the actual submit
            e.preventDefault();

            return false;
    };

btnFinish放在ASP.NET向導控件的FinishNavigationTemplate中。 因此，為了避免運行時錯誤，我需要以編程方式獲取控件的ClientID ，然后將其添加到按鈕的OnClientClick事件：

Button btFinish = MyWizard.FindControl("FinishNavigationTemplateContainerID$btnFinish") as Button;

if (btFinish != null){
   btFinish.Attributes.Add("onclientclick", "Validate('" + btFinish.ClientID + "');");
}

但它不起作用。 我使用Firebug來檢查瀏覽器呈現的頁面，但是雖然源代碼看起來很完美，但是在單擊時不會執行 Javascript函數。

如果JavaScript函數替換我Validate(btnFinishId)與Validate()轉而使用后面的代碼中添加OnClientClick我寫的：

 <asp:Button OnClientClick="Validate();" "ID="btnFinish" runat="server" Text="Finish" UseSubmitBehavior="false" 
    CausesValidation="true" CommandName="MoveComplete" CssClass="buttonStyle"/>

該函數被執行，但當然不能做我想要的，因為缺少按鈕Id。 有人有解決方案嗎？

Answer 1

你走在正確的軌道上。 這樣的事情應該有效：

<script type="text/javascript">
    validate = function(btn){

        //trigger client-side validation
        var valid = Page_ClientValidate("");

        //disable the button if the form is valid
        btn.disabled = valid;

        //trigger postback if the form is valid
        //otherwise do nothing
        return valid;                        
    }
</script>
<asp:Button ID="btnFinish" runat="server" Text="Finish" OnClientClick="return validate(this);" OnClick="btnFinish_Click" ... />

它看起來有些倒退，但你可以像這樣縮短函數：

<script type="text/javascript">
    validate = function(btn){
        btn.disabled = Page_ClientValidate("");                        
        return btn.disabled;                        
    }
</script>

Answer 2

一種方法是在頁面上創建一個普通的HTML按鈕，使用jQuery添加附加一個click事件。 然后，您可以使用css隱藏.net按鈕。

在html按鈕的click事件中，您可以使用.net按鈕單擊事件。

$("#yourbutton").trigger("click");