本文详解为何直接对 <td> 使用 disabled 属性无效，并提供基于 CSS pointer-events 与 jQuery 的可靠解决方案，实现“当首列文本为指定值（如 'Test'）时，禁用该行第二、三列的输入与点击交互”。
本文详解为何直接对 `
在 Web 开发中，一个常见需求是：根据表格首列（<td>）的文本内容动态控制同行其他单元格的可交互状态。例如，当某行第一列文本为 "Test" 时，需禁用该行的 <input> 输入框（位于第二列），并阻止第三列的任何用户操作（如点击、聚焦）。但许多开发者会尝试直接调用 $(...).prop('disabled', true) 作用于 <td> 元素——这不会生效，因为 <td> 是纯容器标签，原生不支持 disabled 属性；该属性仅对表单控件（如 <input>、<button>、<select>）有效。
✅ 正确思路是：不操作 <td>，而是控制其内部可交互元素（如 <input>），并配合 CSS 阻断整列的鼠标事件流。以下是分步实现方案：
1. 精准定位并禁用表单控件
首先，针对需要禁用的 <input> 元素（位于第二列），使用 .prop('disabled', true)：
$("#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr").each(function() {
const firstCellText = $(this).find("td:first-child").text().trim();
if (firstCellText === "Test") {
// 仅禁用第二列中的 input（推荐：语义明确、功能可靠）
$(this).find("td:nth-child(2) input").prop("disabled", true);
// 如需同时禁用第三列中的 input（若存在）
// $(this).find("td:nth-child(3) input").prop("disabled", true);
}
});2. 使用 CSS 实现视觉禁用与事件拦截
为提升用户体验，应同步添加视觉反馈（如灰度、半透明）并彻底禁用鼠标交互。关键在于 pointer-events: none —— 它会使元素及其子元素完全忽略所有鼠标事件（包括 click、hover、focus）：
/* 禁用整行的交互（可选：更彻底） */
tr[data-disabled="true"] {
pointer-events: none;
opacity: 0.6;
}
/* 或仅禁用特定列（更灵活） */
tr td:nth-child(2).disabled,
tr td:nth-child(3).disabled {
pointer-events: none;
}
tr td:nth-child(2).disabled input,
tr td:nth-child(3).disabled input {
background-color: #f5f5f5;
cursor: not-allowed;
}配合 JavaScript 动态添加类：
$("#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr").each(function() {
const $row = $(this);
const firstCellText = $row.find("td:first-child").text().trim();
if (firstCellText === "Test") {
// 禁用第二列 input
$row.find("td:nth-child(2) input").prop("disabled", true);
// 为第二、三列添加禁用样式类
$row.find("td:nth-child(2), td:nth-child(3)").addClass("disabled");
}
});⚠️ 注意事项
- trim() 不可少：text() 可能包含空格或换行符，务必用 .trim() 清理后再比较；
- 避免误用 hide()：hide() 仅隐藏元素，不阻止交互逻辑，且破坏布局，不符合“禁用”语义；
- 无障碍（a11y）补充：为提升可访问性，建议同时添加 aria-disabled="true" 到被禁用的 <input>；
- 动态数据场景：若表格内容由 AJAX 或模板引擎动态生成，需确保脚本在 DOM 渲染完成后执行（如 $(document).ready() 或 MutationObserver 监听）。
✅ 总结
<td> 本身无法被 disabled，真正的禁用必须落实到其内部的可交互元素（如 <input>），再辅以 pointer-events: none 和 CSS 样式实现视觉与交互层面的双重禁用。该方案兼容性强、语义清晰、易于维护，是处理表格条件禁用的标准实践。
