How to disable specific radiobuttonlist switch in javascript

Question

I am at my end when it comes to this. JavaScript is definitely not my strong suit, and I was trying to find a solution for Google. Here is the code I have:

<asp:RadioButtonList ID="Group1Most" onClick="disable('Group1Most', 'Group1Least')" runat="server" > <asp:ListItem Value="1"> |</asp:ListItem> <asp:ListItem Value="2"> |</asp:ListItem> <asp:ListItem Value="3"> |</asp:ListItem> <asp:ListItem Value="4"> |</asp:ListItem> </asp:RadioButtonList> <asp:RadioButtonList ID="Group1Least" runat="server" > <asp:ListItem Value="1"> This and That</asp:ListItem> <asp:ListItem Value="2"> Fire and Ice</asp:ListItem> <asp:ListItem Value="3"> Black and Tan</asp:ListItem> <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem> </asp:RadioButtonList> 

And here is the JavaScript:

 function disable(index, control) { var selected=($("[ID$=_"+index+"] input[type=radio]:checked").val()); //The rest of the stuff that I can't figure out } 

What I want to do is when you click the radio button in the Group1Most RadionButtonList, it will turn off the corresponding switch to the Group1Least RadioButtonList. The problem is that I cannot figure out how to select a separate radio button in RadioButtonList. Can anybody help me?

Answer 1

Try adding this jQuery to your page. You do not need the shutdown function you wrote

  <script type="text/javascript" > $(document).ready(function() { //hook up a click event to all of the inputs in your first group $('input[name="Group1Most"]').click(function() { //identify the value from the checked item in the first group var checkedValue = $('[name="Group1Most"]:checked').val(); //identify the item in the second group and disable it. $('input[name="Group1Least"][value=' + checkedValue + ']').attr('disabled', 'disabled'); }); }); </script> 

Assuming the values ​​match, this will work. You can also do this by index if you want.

if you want only one item to be disabled at a time and to enable the previously disabled item in the second group again, include the next line as the first line in the click function. It will remove the disabled attribute from all inputs in the group.

  $('input[name="Group1Least"]').removeAttr("disabled") 

Edit:

In response to the comment from @Majid above, the output of the controls is as follows:

  <table id="Group1Most" border="0" onclick="disable('Group1Most', 'Group1Least')" > <tbody><tr> <td><input id="Group1Most_0" name="Group1Most" value="1" type="radio"><label for="Group1Most_0"> |</label></td> </tr><tr> <td><input id="Group1Most_1" name="Group1Most" value="2" type="radio"><label for="Group1Most_1"> |</label></td> </tr><tr> <td><input id="Group1Most_2" name="Group1Most" value="3" type="radio"><label for="Group1Most_2"> |</label></td> </tr><tr> <td><input id="Group1Most_3" name="Group1Most" value="4" type="radio"><label for="Group1Most_3"> |</label></td> </tr> </tbody></table> <table id="Group1Least" border="0"> <tbody><tr> <td><input id="Group1Least_0" name="Group1Least" value="1" type="radio"><label for="Group1Least_0"> This and That</label></td> </tr><tr> <td><input id="Group1Least_1" name="Group1Least" value="2" type="radio"><label for="Group1Least_1"> Fire and Ice</label></td> </tr><tr> <td><input id="Group1Least_2" name="Group1Least" value="3" type="radio"><label for="Group1Least_2"> Black and Tan</label></td> </tr><tr> <td><input id="Group1Least_3" name="Group1Least" value="4" type="radio"><label for="Group1Least_3"> Smith and Wesson</label></td> </tr> </tbody></table> 

Answer 2

Although Daniel's solution is mostly correct, this will not work with ASP.NET. This is because ASP.NET distorts identifiers when controls are inside containers with names. Your simple bet is to add multiple classes to your controls.

Try the following:

 <asp:RadioButtonList ID="Group1Most" CssClass="Group1Most" onClick="disable('Group1Most', 'Group1Least')" runat="server" > <asp:ListItem Value="1"> |</asp:ListItem> <asp:ListItem Value="2"> |</asp:ListItem> <asp:ListItem Value="3"> |</asp:ListItem> <asp:ListItem Value="4"> |</asp:ListItem> </asp:RadioButtonList> <asp:RadioButtonList ID="Group1Least" CssClass="Group1Least" runat="server" > <asp:ListItem Value="1"> This and That</asp:ListItem> <asp:ListItem Value="2"> Fire and Ice</asp:ListItem> <asp:ListItem Value="3"> Black and Tan</asp:ListItem> <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem> </asp:RadioButtonList> 

And, since I’m never a supporter of writing embedded JavaScript, I would put it in an external script file, we will call it site.js and refer to it from your page using a script tag, for example

 <script type="text/javascript" src="site.js"></script> 

Vocation:

 $(function(){}); 

is an abbreviation for:

 $(document).ready(function(){}); 

So this happens inside site.js:

 $(function() { $('.Group1Most input').click(function() { $('.Group1Least [value=' + $(this).val() + ']').attr('disabled','disabled'); }); }); 

Answer 3

It is not very dynamic, but the principle of this will help you where you need it. You can change the switch to css shift and add code later to reuse all other controls.

 <asp:RadioButtonList ID="Group1Most" runat="server" > <asp:ListItem Value="1"> |</asp:ListItem> <asp:ListItem Value="2"> |</asp:ListItem> <asp:ListItem Value="3"> |</asp:ListItem> <asp:ListItem Value="4"> |</asp:ListItem> </asp:RadioButtonList> <asp:RadioButtonList ID="Group1Least" runat="server" > <asp:ListItem Value="1"> This and That</asp:ListItem> <asp:ListItem Value="2"> Fire and Ice</asp:ListItem> <asp:ListItem Value="3"> Black and Tan</asp:ListItem> <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem> </asp:RadioButtonList> <script type="text/javascript"> $("input[name$='Group1Most']").change( function () { var disableVal = $(this).val(); var disableName = 'Group1Least_' + disableVal; $("input[id*='Group1Least']").each( function (i) { if($(this).val() == disableVal) $(this).fadeOut("slow"); }); // you can disable, I just faded it out... }); </script>