Question

I have a table where a column in each row consists of the same <select> option like this:

<tr>
....
<td>..</td>
<td>
    <select id="gender">
        <option value="M">Male</option>
        <option value="F">Female</option>
    </select>
</td>
</tr>
<tr>
....
<td>..</td>
<td>
    <select id="gender">
        <option value="M">Male</option>
        <option value="F">Female</option>
    </select>
</td>
</tr>
<tr>
....
<td>..</td>
<td>
    <select id="gender">
        <option value="M">Male</option>
        <option value="F">Female</option>
    </select>
</td>
</tr>

Lets say i’m currently working on the second row, how do I disable the option on the third row?

Answer 1

$(this).closest("tr").next().find("select").prop("disabled", true);

Use the closest("selector") method to traverse up to the parent (you could also use parents("selector")), jump to the next one using next(), traverse down to find("selector") and edit the form element with prop().

Of course, you’d put this line in some kind of event handler, probably a change event fired by the previous select element. However, before you do that, you’ll need to make sure you’re not doubling up on id‘s…otherwise jQuery won’t work so well.