Enable Disable RadioButtonList with another RadioButtonList Selection ASP.NET

Question

Hi I need help with enabling /disabling RadiobuttonList from Client Side

My form looks like this:

1. What I want is by default Yes-Options RadioButtonlist and No-Options Radiobuttonlist shoulsd be disbaled. When user selects YES, YES-Options Radiobutton list shouls get enabled and NO-Options radiobutton list should get disbaled In the same way when selected NO, NO-Options radiobuttonlist should get enabled and YES-Options radiobutton list shouls be disabled.

2. When clicked Save button on bottom, validation should happen. User should select YES or NO from radiobutton list which is on top and then a value should be selected from it's corresponding options. ( When Yes is selected, a value should be selected from YES--Options and Viceversa)

How can I do this ??

Below is my markup

<asp:RadioButtonList ID="rbtnMain" runat="server">
<asp:ListItem Text="YES" Value="1"></asp:ListItem>
<asp:ListItem Text="NO" Value="0"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />

YES -- Options
<asp:RadioButtonList ID="rbtnMainYes" runat="server">
<asp:ListItem Text="Options Yes -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options Yes -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options Yes -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />
NO -- Options
<asp:RadioButtonList ID="rbtnMainNo" runat="server">
<asp:ListItem Text="Options No -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options No -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options No -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<br /><br />
<asp:Button ID="btnSave" runat="server" Text="Save" />

How can I do this from Clientside ?

Answer 1

Here is working jquery for your desired output:

 <script type="text/javascript">
{
    $(document).ready(function () {
        $('#<%= rbtnMain.ClientID %> input:radio').change(function () {                
            var SelectedValue = $('#<%=rbtnMain.ClientID %> :radio:checked').next().text();
            if (SelectedValue == "YES") {
                $('#<%= rbtnMainYes.ClientID %> input:radio').attr("disabled", "disabled");
                $('#<%= rbtnMainNo.ClientID %> input:radio').removeAttr("disabled");
            }
            else {
                $('#<%= rbtnMainNo.ClientID %> input:radio').attr("disabled", "disabled");
                $('#<%= rbtnMainYes.ClientID %> input:radio').removeAttr("disabled");
            }
        });
    });

}

Hope this will help you. Don't forget to mark as answer, if it helps you.