javascript - 禁用 dx aspxbutton

Question

我正在尝试根据是否选中复选框来设置按钮的启用/禁用。下面是我的 javascript 和 asp 代码，它不起作用。我不确定是否根本没有调用该函数，或者我禁用按钮的方式有问题。

<script type="text/javascript">

function OnChkAgreeChanged(chkAgree) {
    if (document.getElementById"chkAgree").checked)
        document.getElementById("btnSubmit").SetEnabled(true);
    else
        document.getElementById("btnSubmit").SetEnabled(false);
}
</script>


<asp:checkbox ID="chkAgree" runat="server" 
    Text="blablabla" onchange="javascript:OnChkAgreeChanged(this);"/>


<dx:ASPxButton ID="btnSubmit" runat="server" Text="Submit" 
    UseSubmitBehavior="true" AutoPostBack="true" Width="175px" 
    CssClass="submitButton" OnClick="btnSubmit_Click" enabled="false">
</dx:ASPxButton>

Answer 1

DevExpress 为它的各种控件中的每一个创建一个客户端实例对象。在这种情况下，它将创建一个 ASPxClientButton对于 btn 提交。由于您还没有为 btnSubmit 提供 ClientInstanceName，因此您可以像这样访问它:

window.aspxGetControlCollection().elements['<%= btnSubmit.ClientID %>'];

这意味着您的整个处理程序函数可能看起来像这样:

function OnChkAgreeChanged(chkAgree) 
{
    btnSubmit = window.aspxGetControlCollection().elements['<%= btnSubmit.ClientID %>'];
    if(!(btnSubmit === null || btnSubmit === undefined)) { btnSubmit.SetEnabed(chkAgree.checked); }
}

您还可以通过像这样定义 ClientInstanceName 属性来让您的生活更轻松:

<dx:ASPxButton ID="btnSubmit" ClientInstanceName="btnSubmit" runat="server" Text="Submit" 
    UseSubmitBehavior="true" AutoPostBack="true" Width="175px" 
    CssClass="submitButton" OnClick="btnSubmit_Click" enabled="false">
</dx:ASPxButton>

然后，您就可以直接在您的处理程序中使用它:

function OnChkAgreeChanged(chkAgree) 
{
    if(!(btnSubmit === null || btnSubmit === undefined)) { btnSubmit.SetEnabed(chkAgree.checked); }
}

你会注意到我喜欢检查那个东西是否为空，因为如果你在代码隐藏中将显示设置为无或以其他方式禁用它，很可能是 DevExpress 魔法/巫术(选择一个)获胜'发出创建该实例对象的 JS。