本文详解为何直接对 <td> 使用 disabled 属性无效，并提供基于 CSS pointer-events 与 jQuery 的可靠解决方案，实现“首列值为指定文本时禁用同行第二、三列输入框及交互”的功能。
本文详解为何直接对 `
在 HTML 表格操作中，一个常见误区是试图直接对 <td> 元素设置 disabled 属性（例如 $(td).prop('disabled', true)）。这是无效的，因为 <td> 不是表单可交互元素（如 <input>、<button>、<select>），它本身不支持 disabled 属性——该属性仅对表单控件生效，浏览器会忽略对 <td> 的 disabled 设置。
要实现“当第一列单元格文本等于 'Test'（注意原问题中代码误写为 'Test;'，需修正）时，禁用同一行中第二、三列的输入框及阻止用户点击/聚焦”，推荐采用以下专业、语义清晰且兼容性良好的方案：
✅ 正确做法：禁用目标子控件 + 视觉反馈
- 定位并禁用实际可交互的表单元素（如 <input>），而非 <td>；
- 为整行添加状态类（如 .disabled-row），用于统一控制样式与交互；
- 结合 CSS pointer-events: none 阻止穿透式点击（适用于 <td> 内无其他交互控件的场景）；
- 添加视觉降级效果（如半透明、灰阶）提升用户体验。
示例代码（含修复与增强）
<!-- 引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData">
<tr>
<td>Test</td>
<td><input type="text" name="lname" value="Should be disabled"></td>
<td><input type="text" name="remark" value="Also disabled"></td>
</tr>
<tr>
<td>John</td>
<td><input type="text" name="lname" value="Editable"></td>
<td><input type="text" name="remark" value="Editable"></td>
</tr>
</table>
<style>
/* 禁用行的视觉与交互样式 */
tr.disabled-row {
opacity: 0.6;
background-color: #f9f9f9;
}
tr.disabled-row input,
tr.disabled-row select,
tr.disabled-row textarea {
background-color: #eee;
color: #999;
cursor: not-allowed;
}
/* 可选：全局禁止该行所有子元素鼠标事件（防漏） */
tr.disabled-row td {
pointer-events: none;
}
</style>
<script>
$(document).ready(function() {
$('#ctl00_PlaceHolderMain_subElems7909_repSubElems_tblData tr').each(function() {
const firstCellText = $(this).find('td:first-child').text().trim();
if (firstCellText === 'Test') { // 注意：使用 === 并 trim() 去除空格
$(this)
.addClass('disabled-row')
.find('input, select, textarea') // 精准选择可禁用控件
.prop('disabled', true)
.end();
}
});
});
</script>⚠️ 关键注意事项
- disabled 属性只作用于表单控件：永远不要尝试对 <td>、<tr>、<div> 等非表单元素设置 disabled —— 它不会生效，也不符合 HTML 标准。
- 区分 prop() 与 attr()：对 disabled 应使用 .prop('disabled', true)（设置布尔属性状态），而非 .attr()。
- 文本匹配需严谨：使用 .trim() 清除首尾空白，用严格相等 === 避免类型转换错误；原问题中 'Test;' 多了一个分号，需按实际数据校验。
-
无障碍（a11y）考虑：禁用控件后，应确保屏幕阅读器能识别其状态，可通过添加 aria-disabled="true" 辅助：
.find('input, select, textarea') .prop('disabled', true) .attr('aria-disabled', 'true'); - 动态内容适配：若表格后续通过 AJAX 或 JS 动态插入新行，需将逻辑封装为函数并在插入后重新执行，或使用事件委托（但 disabled 状态本身不触发事件，故仍需主动初始化）。
此方案兼顾功能性、可维护性与可访问性，是处理此类表格条件交互的工业级实践。
