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 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');