How to use JQuery to Disable "specific" Dropdowns

Question

My Goal: Checking radio button will disable the 'same' column of dropdownlist in a number of separate tables.

I understand you can assign ID's and act on those ID's, or using by Tag Name. However, I am new to ASP and have a unique situation that neither of these options appear at the surface to work for me.

I have a web form, that has multiple sections. Each section is made up of a Table with 3 columns and X amount of rows. The first column is used for asking a question, the second and third column reference the left and right side of the body and have a dropdownlist of answers in each column:

Example

 <asp:ContentGroup ID="contentgroup1" runat="server" Title="Sometitle">
<table id="Table1" runat="server">
    <tr>
        <td style="text-indent: 20px">
             Do you feel pain:
            </td>
            <td>
                <asp:DropDownList ID="dropdown1" runat="server" TabIndex="601">
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="dropdown2" runat="server" TabIndex="701">
                </asp:DropDownList>
            </td>
    </tr>
</table>
<asp:ContentGroup ID="contentgroup2" runat="server" Title="Sometitle">
<table id="Table2" runat="server">
    <tr>
        <td style="text-indent: 20px">
             Do you feel numbness?
            </td>
            <td>
                <asp:DropDownList ID="dropdown3" runat="server" TabIndex="601">
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="dropdown4" runat="server" TabIndex="701">
                </asp:DropDownList>
            </td>
    </tr>
</table>

So I obviously can't do something like

var x = document.getElementById('table1').getElementsByTagName("select");
var y = document.getElementById('table2').getElementsByTagName("select");

Or I would would be working with all the dropdownlist . I know classes don't have to be unique, would that be the only approach - to assign a "class='left'" to all the for the left column and a "right" class for all the columns on the right and perform some JavaScript on each class?

Goal: There will be a radio button designated for the "Left side" and one for the "Right side". Selecting a radio button will disable the appropriate column of dropdownlist in all the tables on the form.

Thanks

Answer 1

If you're using JQuery, you could use CSS selectors to select specific columns of your table. Since you say that the select elements should be disabled in multiple tables if one of the radio buttons is clicked, I would give each of your tables a class, for example <table class="disable-columns"></table>. Then use that class name in conjunction with JQuery's excellent CSS selector support to select the select elements in the middle column of your tables

var leftDropDownLists = $("table.disable-columns tr td:first-child + td select");

And to select the select elements in the third column

var rightDropDownLists = $("table.disable-columns tr td:firstchild + td + td select");

You can go here: http://www.w3.org/TR/CSS2/selector.html for documentation on different CSS selectors available to you.

Answer 2

Give your radio buttons IDs and then you can do something like this:

$('#rightRadioButtonId').click(function() { 
    $('table1 select').removeAttr('disabled');
    $('table2 select').attr('disabled', 'disabled');
});

$('#leftRadioButtonId').click(function() { 
    $('table1 select').attr('disabled', 'disabled');
    $('table2 select').removeAttr('disabled');
});

Answer 3

If you are using jQuery you can use the nth-child selector.

So to access all the left hand drop downs in your first table you could do:

$('#Table1 tr td:nth-child(2) select');

and the right hand drop downs:

$('#Table1 tr td:nth-child(3) select');

// or a special case of nth-child: last-child:
$('#Table1 tr td:last-child select');

Answer 4

Here is an example of what I think you're looking for.

jsfiddle.net/CJSwK