禁用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为它的每个控件创建一个客户端实例对象。在本例中，它将为btnSubmit创建一个ASPxClientButton。因为你没有给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); }
}

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

Answer 2

chkAgree是一个对象，而不是字符串。您不必使用document.getElementById。试试这个。

<script type="text/javascript">

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

另外，在onchange="javascript:OnChkAgreeChanged(this);"中，javascript:可能不是必需的。请查看ASP文档。

Answer 3

JQuery解决方案

$(document).ready(function () {
    $('#chkAgree').click(function () {
        if (this.checked) {
            $("#btnSubmit").prop('disabled', false);
        }
        else {
            $("#btnSubmit").prop('disabled', true);
        }
    });
});

或者，如果你想使用JavaScript做同样的事情，可以使用mohkhan建议的解决方案。