本文讲解为何直接对 使用 disabled 属性无效，并提供通过 CSS pointer-events: none 结合 jQuery 实现逻辑禁用的完整方案，适用于首列值匹配（如 "Test"）时禁用同行后续输入型单元格的场景。

本文讲解为何直接对 `

` 使用 `disabled` 属性无效，并提供通过 css `pointer-events: none` 结合 jquery 实现逻辑禁用的完整方案，适用于首列值匹配（如 "test"）时禁用同行后续输入型单元格的场景。

在 HTML 表格中，

元素本身不支持 disabled 属性——该属性仅对表单控件有效（如 、、 等）。因此，当你尝试执行 $(td).prop('disabled', true) 时，DOM 不会响应，控制台也不会报错，但效果完全不会出现。这也是你原始代码未生效的根本原因。

要实现“视觉与交互层面均不可操作”的禁用效果，推荐采用 语义化 + CSS 驱动 的方式：

1. 使用 jQuery 判断首列（td:first-child）文本是否匹配目标值（注意：原文中误写为 'Test;'，实际应为 'Test'，且需考虑空格与大小写）；
2. 若匹配，则为整行 添加自定义类（如 disabled）；
3. 通过 CSS 设置该类下的 pointer-events: none（阻止所有鼠标事件），并辅以 opacity 或 filter 提升视觉反馈。

以下是可直接运行的完整示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><style>
  tr.disabled {
    pointer-events: none;
    opacity: 0.6;
    background-color: #f9f9f9;
  }
  tr.disabled input,
  tr.disabled select,
  tr.disabled textarea {
    background-color: #eee;
    cursor: not-allowed;
  }
</style>

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') { $(this).addClass('disabled'); } }); }); </script>

✅ 关键注意事项：

• 使用 .trim() 清除首尾空白，避免因空格导致匹配失败；
• pointer-events: none 作用于 时，会递归影响其所有子元素（包括嵌套的

），无需逐个设置；

若需更精细控制（例如仅禁用第2列输入框，保留第3列可操作），则应直接定位到目标 并设置 disabled 属性：

$(this).find("td:nth-child(2) input").prop('disabled', true);

对于无障碍访问（a11y），建议额外添加 aria-disabled="true" 和 tabindex="-1"，确保屏幕阅读器正确识别禁用状态。

综上，禁用表格单元格的本质是禁用其内部可交互元素，而非

标签本身。合理结合 DOM 操作与 CSS 响应式控制，既能保证功能健壮，又兼顾可维护性与用户体验。