如何通过选择ASP.NET中的单选按钮来启用和禁用下拉列表

时间:2016-09-06 11:04:38

标签: javascript c# jquery html asp.net

我想创建一个页面,每当我选择一个特定的广播项目时,应该启用一个下拉列表,如果选择了其他项目,则应该禁用下拉列表。

这是我在ASP.NET中的表单脚本

<form id="ticketbooking" class="book-ticket" runat="server">
    <asp:Label ID="mode" runat="server" class="label">Mode of Travel</asp:Label><br />
    <asp:RadioButton name="selector" ID="train" GroupName="travelmode" runat="server" value="tr"></asp:RadioButton>
    <asp:Label ID="forTrain" for="train" runat="server" class="label">Train</asp:Label> 
    <div class="check"></div>
    <asp:RadioButton name="selector" ID="air" GroupName="travelmode" runat="server" value="ar" OnCheckedChanged="air_CheckedChanged"></asp:RadioButton>
    <asp:Label ID="forAir" for="air" runat="server" class="label">Air</asp:Label> 
    <div class="check"></div><br />
    <asp:Label ID="airname" runat="server" class="label">Airline Name</asp:Label><br />
    <asp:DropDownList class="droplist" ID="airlist" runat="server" Enabled="false" Font-Size="20px">
        <asp:ListItem>Air India</asp:ListItem>
        <asp:ListItem>Kingfisher</asp:ListItem>
        <asp:ListItem>Jet Airways</asp:ListItem>
        <asp:ListItem>Spice Jet</asp:ListItem>
    </asp:DropDownList>
</form>

我已尝试过如下的一些脚本,但它们无法工作......

方法1:

<script>
    $(document).ready(function () {
        $('input[name="selector"]').click(function () {
            if ($('input[name="selector"]').is(':checked')) {
                var radioValue = $("input[name='selector']:checked").val();
                if (radioValue == "tr") {
                    $("#airlist").prop("disabled", true);
                } else if (radioValue == "ar") {
                    $("#airlist").prop("disabled", false);
                }
            }
        });
    });
</script>

方法2:

protected void air_CheckedChanged(object sender, EventArgs e)
{
    if (air.Checked == true)
    {
        airlist.Enabled = true;
    }
    else
    {
        airlist.Enabled = false;
    }
}

我试过了两个但是它不起作用..当我点击“Air”单选按钮时,下拉列表应该被启用..我做错了什么?需要一些建议。我仍然是ASP.NET的新手,不知道如何在这个框架中工作。

2 个答案:

答案 0 :(得分:1)

对于方法2,您需要将属性 AutoPostback 添加到Aspx页面

AutoPostback=true

答案 1 :(得分:1)

对于方法1,将ClientIDMode =&#34; static&#34;你的JavaScript代码可以正常工作

<asp:RadioButton ClientIDMode="static" name="selector" ID="train" GroupName="travelmode" runat="server" value="tr"></asp:RadioButton>

对于方法2,将AutoPostback设置为true,您的C#将正常工作

<asp:RadioButton AutoPostback="true" name="selector" ID="train" GroupName="travelmode" runat="server" value="tr"></asp:RadioButton>