td 不是表单控件，disabled 属性无效；应直接禁用内部 input 等元素，或用 pointer-events: none + tabindex="-1" + 视觉样式模拟禁用，同时服务端必须校验。
为什么直接给 td 加 disabled 属性没用
因为 td 不是表单控件，浏览器根本不识别它的 disabled 属性。你写 <td disabled>xxx</td> 或用 jQuery 执行 $(td).prop('disabled', true)，DOM 里虽然多了这个属性，但样式不会变、交互不会禁、屏幕阅读器也无视它——纯属无效操作。
pointer-events: none 是最直接的视觉+交互阻断方式
它让整个单元格（包括内部所有子元素）对鼠标事件“免疫”，配合视觉降级，就能模拟出禁用效果：
- 必须作用在
td或tr上，不能只加在input上——否则用户仍可点击空白区域触发聚焦或默认行为 - 搭配
opacity: 0.6或filter: grayscale(0.5)提升视觉反馈，但别只靠 opacity：高对比度模式下可能完全看不见文字 - 记得加
cursor: not-allowed，否则鼠标悬停时还是手型或箭头，用户会误判可操作性 - 如果单元格内有
input等可聚焦元素，还需额外设tabindex="-1"，防止键盘用户用 Tab 键意外进入
真正需要禁用的是内部表单控件，不是 td
如果你的目标是让用户无法修改某个输入框，那就该直接操作那个 input 元素：
- 用
$(td).find('input, select, textarea').prop('disabled', true)—— 这才是语义正确、表单提交时真正被忽略的方式 - 若同时用了
disabled和pointer-events: none，反而可能干扰键盘导航（比如阻止focus事件冒泡），无障碍体验反而下降 - 注意：禁用后，该字段值不会出现在
FormData或form.serialize()结果里，后端收不到——如果业务上需要保留值，请改用readonly并配合适当样式
视觉隐藏和禁用容易混淆，但目的完全不同
用 visibility: hidden 是为了“看不见但还在布局里”，而禁用是为了“看得见但点不动”。两者不能混用：
- 别对已加
pointer-events: none的td再套visibility: hidden——这会让内容不可见又不可交互，但屏幕阅读器可能仍读取（除非加aria-hidden="true"） - 如果只是想隐藏某列数据（比如 ID 列），用
display: none要小心：表格结构可能错位，尤其存在colspan时；优先用visibility: hidden+border: none+padding: 0控制视觉留白 - 最常被忽略的一点：所有前端禁用逻辑，服务端都必须重新校验权限和字段合法性——用户删掉
disabled属性就能提交任意值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
