Question

I’m at my wit’s end when it comes to this. JavaScript definitely isn’t my strong suit and I’ve been trying to google for a solution. Here’s 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’s 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 whenever you click a radio button on the Group1Most RadionButtonList, it will disable the corresponding radio button on the Group1Least RadioButtonList. The problem is I can’t figure out how to select an individual radio button within the RadioButtonList. Can anybody help me?

Answer 1

Try adding this jQuery to your page instead. You don’t need the disable function that you have written

    <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 would also be able to do it by the index if you wanted to.

if you want to only have one item disabled at a time and re-enable a previously disabled item in the second group, include the following 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 answer to comment from @Majid above, the output of the controls is like this:

    <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>