本文详解为何直接对 使用 disabled 属性无效，并提供基于 CSS pointer-events 与 jQuery 的可靠解决方案，实现“首列值为指定文本时禁用同行第二、三列输入框及交互”的功能。

本文详解为何直接对 `

` 使用 `disabled` 属性无效，并提供基于 css `pointer-events` 与 jquery 的可靠解决方案，实现“首列值为指定文本时禁用同行第二、三列输入框及交互”的功能。

在 HTML 表格操作中，一个常见误区是试图直接对

元素设置 disabled 属性（例如 $(td).prop('disabled', true)）。这是无效的，因为 不是表单可交互元素（如 、、），它本身不支持 disabled 属性——该属性仅对表单控件生效，浏览器会忽略对 的 disabled 设置。

要实现“当第一列单元格文本等于 'Test'（注意原问题中代码误写为 'Test;'，需修正）时，禁用同一行中第二、三列的输入框及阻止用户点击/聚焦”，推荐采用以下专业、语义清晰且兼容性良好的方案：

✅ 正确做法：禁用目标子控件 + 视觉反馈

1. 定位并禁用实际可交互的表单元素（如

），而非 ；

为整行添加状态类（如 .disabled-row），用于统一控制样式与交互；

结合 CSS pointer-events: none 阻止穿透式点击（适用于 内无其他交互控件的场景）；

添加视觉降级效果（如半透明、灰阶）提升用户体验。

示例代码（含修复与增强）

<!-- 引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Test
John

<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 属性只作用于表单控件：永远不要尝试对 、 、
  等非表单元素设置 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 状态本身不触发事件，故仍需主动初始化）。

此方案兼顾功能性、可维护性与可访问性，是处理此类表格条件交互的工业级实践。