本文详解为何直接对 <td> 使用 disabled 属性无效，并提供基于 pointer-events: none 与 CSS 类控制的可靠方案，配合 jQuery 动态判断首列文本内容，实现条件化禁用第二、三列交互功能。
本文详解为何直接对 `
在 HTML 表格中，<td> 元素本身不支持 disabled 属性（该属性仅对表单控件如 <input>、<button>、<select> 等原生可交互元素有效）。因此，当你执行 $(this).find("td:last-child").prop('disabled', true) 时，DOM 虽会添加 disabled="disabled" 属性，但浏览器完全忽略它——这正是你代码未生效的根本原因。
要实现视觉与交互层面的“禁用”效果，推荐采用 CSS + JavaScript 协同策略：
- 使用 jQuery 检查每行首列（td:first-child）文本是否匹配目标值（如 'Test'）；
- 若匹配，则为整行 <tr> 添加自定义类（如 disabled）；
- 通过 CSS 设置该类下的 pointer-events: none 阻断所有鼠标事件（点击、悬停、输入等），并辅以 opacity: 0.5 提供视觉反馈。
以下是完整、可直接运行的解决方案：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
tr.disabled {
pointer-events: none;
opacity: 0.5;
}
/* 可选：进一步禁用内部表单控件（增强兼容性） */
tr.disabled input,
tr.disabled select,
tr.disabled textarea {
background-color: #f5f5f5;
cursor: not-allowed;
}
</style>
<table id="ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData">
<tr>
<td>Test</td>
<td><input type="text" name="lname" value="Should be disabled"></td>
<td>Blah</td>
</tr>
<tr>
<td>John</td>
<td><input type="text" name="lname" value="Active"></td>
<td>Blah</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr").each(function() {
const firstCellText = $(this).find("td:first-child").text().trim();
if (firstCellText === 'Test') {
$(this).addClass('disabled');
}
});
});
</script>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- trim() 用于清除首列文本可能存在的空格，避免因空白字符导致匹配失败；
- pointer-events: none 作用于 <tr>，会递归阻止其所有子元素的鼠标交互，无需逐个处理 <input> 或 <td>；
- 若需更严格的表单控件禁用（如防止键盘聚焦），可在 CSS 中额外设置 input:disabled 或动态添加 disabled 属性到内部 <input> 元素（但注意：<td> 本身仍不可被 disabled）；
- 此方案兼容所有现代浏览器，且语义清晰、性能高效，无需修改 HTML 结构。
⚠️ 注意：不要尝试对 <td> 设置 disabled 属性或 contenteditable="false" 来模拟禁用——它们既无标准支持，也无法可靠阻断用户交互。始终优先使用 pointer-events + 视觉样式组合，这是 Web 开发中处理非表单容器“禁用态”的最佳实践。
