本文详解为何直接对 <td> 使用 disabled 属性无效，并提供基于 CSS pointer-events 与 jQuery 的可靠解决方案，实现“当首列文本为指定值时，禁用该行第二、三列中的可交互元素（如 input）”。
本文详解为何直接对 `
在 HTML 表格中，<td> 元素本身不支持 disabled 属性——该属性仅对表单控件有效（如 <input>、<select>、<button> 等）。因此，以下代码注定无效：
$(this).find("td:last-child").prop('disabled', true); // ❌ 错误：td 无 disabled 语义即使 jQuery 执行成功，浏览器也不会响应此操作，因为 <td> 不是可禁用的表单元素。真正需要禁用的是其内部的 <input>，或通过视觉+交互双重手段使整列“不可用”。
✅ 正确思路：聚焦可禁用元素 + 阻断用户交互
推荐采用 “定位目标子元素 + 批量禁用 + 视觉反馈” 三步法：
- 遍历每一行，检查首列（td:first-child）文本是否匹配条件（如 'test'，注意大小写与空格）；
- 对该行中需禁用的 <input> 元素（如第二、三列内的输入框）调用 .prop('disabled', true)；
- 可选增强体验：添加 CSS 类控制透明度、鼠标样式等，提升 UI 可感知性。
✅ 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
tr.disabled input {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
tr.disabled input::placeholder {
color: #ccc;
}
</style>
</head>
<body>
<table id="ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData">
<tr>
<td>test</td>
<td><input type="text" name="lname" placeholder="Last Name"></td>
<td><input type="text" name="extra" placeholder="Extra Info"></td>
</tr>
<tr>
<td>John</td>
<td><input type="text" name="lname" placeholder="Last Name"></td>
<td><input type="text" name="extra" placeholder="Extra Info"></td>
</tr>
<tr>
<td>TEST</td>
<td><input type="text" name="lname" placeholder="Last Name"></td>
<td><input type="text" name="extra" placeholder="Extra Info"></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const targetValue = 'test'; // 注意：区分大小写；如需忽略大小写，改用 .toLowerCase()
$('#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr').each(function() {
const firstCellText = $(this).find('td:first-child').text().trim();
if (firstCellText === targetValue) {
// ✅ 精准禁用第二列和第三列中的所有 input（可按需扩展 selector）
$(this).find('td:nth-child(2), td:nth-child(3) input').prop('disabled', true);
$(this).addClass('disabled'); // 便于后续 CSS 控制
}
});
});
</script>
</body>
</html>⚠️ 关键注意事项
- 文本匹配要严谨：使用 .trim() 去除首尾空白，避免因空格导致匹配失败；
-
大小写敏感：'Test' !== 'test'，如需忽略大小写，统一转为小写再比较：
if (firstCellText.toLowerCase() === 'test') { ... } - 仅禁用 <input>，非 <td>：disabled 必须作用于表单控件本身；
- CSS 辅助增强体验：.disabled input 样式让禁用状态一目了然，提升可访问性；
- 动态内容需重执行：若表格数据由 AJAX 加载或 React/Vue 渲染，需在 DOM 更新后再次调用逻辑。
✅ 总结
禁用表格列的本质，不是操作 <td>，而是识别并控制其内部可交互元素的状态。结合 jQuery 的精准选择器与语义化 DOM 操作，配合轻量 CSS，即可稳健、可维护地实现条件禁用逻辑。记住：disabled 是表单控件的专属属性——理解这一点，是解决此类问题的第一把钥匙。
