How to enable the dropdown list on a specific radio button

Question

I am trying to enable the dropdown list when the user select the radio button with a id =9, for some reason the jquery function is not working

For debugging purpose, i've tried to alert the selected id but it's null Any thoughs?

C# code

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            string constr = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString;
            using (MySqlConnection con = new MySqlConnection(constr))
            {
                string query = "SELECT * FROM case_cat_lv1";
                using (MySqlCommand cmd = new MySqlCommand(query))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    rblFruits.DataSource = cmd.ExecuteReader();
                    rblFruits.DataTextField = "category_name";
                    rblFruits.DataValueField = "id";
                    rblFruits.DataBind();
                    con.Close();
                }
            }
        }
    }

ASP.NET .aspx

<form id="form1" runat="server">
 <div>

<asp:RadioButtonList ID="rblFruits" runat="server"    OnCheckedChanged="air_CheckedChanged" class="radio">
 </asp:RadioButtonList>
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />

  <asp:DropDownList  ID="airlist" runat="server"  Font-Size="20px" class="dropdown">
    <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>       

     </div>


 <script>
    $(document).ready(function () {
        $('.dropdown').attr("disabled", true);
    $('#rblFruits').change(function () {

        alert($(this).val());

        if ($(this).val() == '9') {
            $('.dropdown').attr("disabled", false);
        }
        else {
            $('.dropdown').attr("disabled", true);
        }
        //alert($(this).val());
    });
});</script>
</form>

Answer 1

A few of things to consider. ASP.net webforms can mangle ids, RadioButtonList is not an HTML entity and is rendered as radio buttons with their own ids and values, finally you also have OnCheckedChanged="air_CheckedChanged" as a server side event handler which could be causing you problems.

With these kinds of issues with .net WebForms, always check the rendered HTML to see if it is what you were expecting.

Here's how I'd do it:

<form id="form1" runat="server">
 <div>
<!-- I've taken out the server side event handler -->
<asp:RadioButtonList ID="rblFruits" runat="server"     class="radio">
 </asp:RadioButtonList>
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />

  <asp:DropDownList  ID="airlist" runat="server"  Font-Size="20px" class="dropdown">
    <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>       

     </div>


 <script>
    $(document).ready(function () {
        $('.dropdown').attr("disabled", true);
        /*#rblFruits will be a container, not actual radio buttons*/
        /*Keeping in mind name mangling, get the actual client ID. 
          Note that if you're putting thing in an external js file, 
          you'll need to come up with another plan*/
    $('#<%=rblFruits.ClientID%> input[type=radio]').change(function () {

        alert($(this).val());
        $('.dropdown').prop("disabled", $(this.val() !== '9'));
    });
});</script>
</form>

See also: http://api.jquery.com/prop/

Answer 2

Try $(this).find(":checked").val(); instead of $(this).val(). And if you want id of selected radio button then $(this).find(":checked").attr("id").

To enable dropdown list you can remove attribute disabled. It should work.

$('.dropdown').removeAttr("disabled");

For disabling your code will work fine.

$('.dropdown').attr("disabled", true);