jquery - 根据之前的选择禁用表单控件

Question

我有一个表，其中每行中的一列包含相同的<select>选项，如下所示：

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

假设我目前正在处理第二行，如何禁用第三行的选项？

Answer 1

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

使用closest("selector")方法向上遍历到父元素（也可以使用parents("selector")），使用 跳转到下一个元素，使用next()向下遍历find("selector")并编辑表单元素prop()。

当然，您可以将此行放在某种事件处理程序中，可能是由前一个元素change触发的事件。select然而，在你这样做之前，你需要确保你没有在id's 上加倍......否则 jQuery 不会工作得那么好。