在特殊情况下禁用javascript中的ddl更改事件

Disable ddl change event from javascript in special case

本文关键字：事件 ddl 中的 javascript 在特殊情况下      更新时间：2023-09-26

有两个单选按钮和一个下拉列表。如果选中了rad1并且下拉列表值发生了更改，则执行下拉更改事件。如果选中了rad2，则禁用更改事件（不是下拉列表）。

<asp:RadioButton ID="radNew" runat="server" Text="New" GroupName="radSelect" />
<asp:RadioButton ID="radExisting" runat="server" Text="Existing" GroupName="radSelect" />
<asp:DropDownList ID="ddlType" 
        runat="server"
        AutoPostBack="true"
        EnableViewState="true"
        onClick="return ddlClick();"
        OnSelectedIndexChanged="ddlType_SelectedIndexChanged">
    <asp:ListItem>Val1</asp:ListItem>
    <asp:ListItem>Val2</asp:ListItem>
    <asp:ListItem>Val3</asp:ListItem>
</asp:DropDownList>

Javascript：

function ddlClick() {
    if(document.getElementById('<%=radNew.ClientID%>').checked){
        return false;
    }
}

它还在执行rad2选择的下拉列表的更改事件？

备用1

我们需要覆盖下拉菜单的onchange事件，然后根据条件执行所需的。

If the RadioButton is selected then 
   doYourStuff; 
   return false;
else
   Call __doPostBack function on the Dropdown

样本代码

Default.aspx

<form id="form1" runat="server">
<asp:RadioButton ID="radNew" runat="server" Text="New" GroupName="radSelect" />
<asp:RadioButton ID="radExisting" runat="server" Text="Existing" GroupName="radSelect" />
<asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true" EnableViewState="true"
    OnSelectedIndexChanged="ddlType_SelectedIndexChanged">
    <asp:ListItem>Val1</asp:ListItem>
    <asp:ListItem>Val2</asp:ListItem>
    <asp:ListItem>Val3</asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" id="lbl" Text=""></asp:Label>
</form>
<script type="text/javascript">
    document.getElementById('<%=ddlType.ClientID%>').onchange = function () {
        if (document.getElementById('<%=radNew.ClientID%>').checked) {
            document.getElementById('<%=lbl.ClientID%>').textContent = "From js";
            return false;
        } else {
            setTimeout('__doPostBack(''ddlType'','''')', 0);
        }
    };
</script>

Default.aspx。cs

protected void ddlType_SelectedIndexChanged(object sender, EventArgs e)
{
    lbl.Text = "From the server";
}

备用2

与其覆盖下拉菜单的onchange事件，不如将您的条件添加到默认的dropdown onchange事件中。

<asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true" EnableViewState="true"
    onchange="if(!ddlCheck()){return false;}" OnSelectedIndexChanged="ddlType_SelectedIndexChanged">
    <asp:ListItem>Val1</asp:ListItem>
    <asp:ListItem>Val2</asp:ListItem>
    <asp:ListItem>Val3</asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
    function ddlCheck() {
        if (document.getElementById('<%=radNew.ClientID%>').checked) {
            document.getElementById('<%=lbl.ClientID%>').textContent = "From js";
            return false;
        } else {
            return true;
        }
    }
</script>

将以上内容加载到浏览器后，下拉菜单将类似

<select name="ddlType" onchange="if(!ddlCheck()){console.log(&#39;to&#39;);return false;};
    setTimeout(&#39;__doPostBack('&#39;ddlType'&#39;,'&#39;'&#39;)&#39;, 0)" id="ddlType">

因此，首先将检查我们的条件，并根据该条件执行其余操作。

检查enableDDLHandler单选按钮的状态（如果已检查）。如果选中，则onchange的studentDL执行您的任务。如果未选中，则If内部的代码将不会执行。

Bingo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Bingo.aspx.cs" Inherits="RadioButtonChanged.Bingo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var ddl = document.getElementById("studentDDL");
            ddl.onchange = function () {
                var radioChecked = document.getElementById("enableDDLHandler");
                if (radioChecked.checked) {
                    document.getElementById("tongo").innerHTML = "Great!!!";
                }
            };
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Enable : <asp:RadioButton GroupName="Check" ID="enableDDLHandler" runat="server"  />
        Disable : <asp:RadioButton GroupName="Check" ID="disableDDLHandler" runat="server" />
        <asp:DropDownList ID="studentDDL" runat="server">
            <asp:ListItem>Bill</asp:ListItem>
            <asp:ListItem>Mark</asp:ListItem>
            <asp:ListItem>Steve</asp:ListItem>
            <asp:ListItem>Linus</asp:ListItem>
        </asp:DropDownList>
        <asp:Label ID="tongo" runat="server" Text="Nothing" />
    </div>
    </form>
</body>
</html>
相关文章：