How to disable a certain radio button in a RadioButtonList in Javascript

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>

Answer 2

Though Daniel's solution is correct for the most part, it won't work well with ASP.NET. This is due to ASP.NET's mangling of IDs when controls are inside naming containers. Your simplest bet is to add a couple of classes to your controls.

Try this:

<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, because I never advocate writing inline JavaScript, I would put this in an external script file, we'll call it site.js, and reference it from within your page using a script tag, like so:

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

Calling:

$(function(){}); 

is shorthand for :

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

So, this goes inside site.js:

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

Answer 3

This isn't terribly dynamic, but the principle of it will get you where you need to be. You can change the fade-out to a css change and you can add code later to reenable 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>