本文详解为何直接对 使用 disabled 属性无效，并提供基于 CSS pointer-events 与 jQuery 的可靠解决方案，实现“当首列文本为指定值（如 'Test'）时，禁用该行第二、三列的输入与点击交互”。

本文详解为何直接对 `

` 使用 `disabled` 属性无效，并提供基于 css `pointer-events` 与 jquery 的可靠解决方案，实现“当首列文本为指定值（如 'test'）时，禁用该行第二、三列的输入与点击交互”。

在 Web 开发中，一个常见需求是：根据表格首列（

）的文本内容动态控制同行其他单元格的可交互状态。例如，当某行第一列文本为 "Test" 时，需禁用该行的 输入框（位于第二列），并阻止第三列的任何用户操作（如点击、聚焦）。但许多开发者会尝试直接调用 $(...).prop('disabled', true) 作用于 元素——这不会生效，因为 是纯容器标签，原生不支持 disabled 属性；该属性仅对表单控件（如 、、）有效。

✅ 正确思路是：不操作 ，而是控制其内部可交互元素（如

），并配合 CSS 阻断整列的鼠标事件流。以下是分步实现方案：

1. 精准定位并禁用表单控件

首先，针对需要禁用的 元素（位于第二列），使用 .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" 到被禁用的 ；
• 动态数据场景：若表格内容由 AJAX 或模板引擎动态生成，需确保脚本在 DOM 渲染完成后执行（如 $(document).ready() 或 MutationObserver 监听）。

✅ 总结

本身无法被 disabled，真正的禁用必须落实到其内部的可交互元素（如 ），再辅以 pointer-events: none 和 CSS 样式实现视觉与交互层面的双重禁用。该方案兼容性强、语义清晰、易于维护，是处理表格条件禁用的标准实践。