本文详解为何直接对 设置 disabled 无效，并提供简洁可靠的纯 JavaScript 解决方案，通过 CSS 选择器精准定位目标 元素并批量禁用，避开常见 DOM 操作误区。

本文详解为何直接对 `

` 设置 `disabled` 无效，并提供简洁可靠的纯 JavaScript 解决方案，通过 CSS 选择器精准定位目标 `` 元素并批量禁用，避开常见 DOM 操作误区。

在 Web 开发中，常需动态控制表单控件状态。但一个典型误区是：误以为可对非表单元素（如 <td>）设置 <code>disabled 属性——实际上，disabled 是 <input>、<select></select>、<textarea></textarea> 等可交互表单元素的原生属性，<td> 标签根本不支持该属性，对其赋值不会产生任何效果。<p>另一个关键问题是：<code>document.getElementsByTagName('td') 返回的是 NodeList（类数组集合），而非单个 DOM 元素。因此 variable3.disabled = true 实际上是在给整个 NodeList 对象添加属性，而非遍历每个 <td> —— 这不仅逻辑错误，更无法影响任何子 <code><input>。

✅ 正确做法是：直接选中目标 <input> 元素，并对其设置 disabled = true。借助现代 CSS 选择器，可大幅简化逻辑：

var table = {
  disableTextbox: function() {
    // 选取 table 中所有 tr（除第1行和第7行外）内的 input 元素
    document.querySelectorAll('table tr:not(:nth-child(1)):not(:nth-child(7)) input[type="text"]')
      .forEach(input => input.disabled = true);
  }
};

table.disableTextbox();

这段代码利用 :not() 和 :nth-child(n) 伪类精准排除第 1 行与第 7 行（注意：:nth-child() 从 1 开始计数，对应 DOM 中的实际位置），再通过 input[type="text"] 锁定目标输入框，语义清晰、性能高效，且无需手动遍历行索引或处理 cells 数组。

⚠️ 注意事项：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

• :nth-child(n) 基于父元素下的所有子元素顺序，确保 <tr> 是 <code><table> 的直接子元素（即无 <code><tbody> 包裹干扰）；若存在 <code><tbody>，请改用 <code>'table tbody tr:not(...)'。
• 若需兼容 IE11 及更早版本，应避免 :not(:nth-child()) 链式写法，改用 querySelectorAll('table tr') 后手动过滤索引（注意：rows[0] 对应第 1 行，rows[6] 对应第 7 行）。
• 禁用后，用户无法聚焦或修改输入框内容，但其值仍会随表单提交——如需彻底排除，建议结合 name 属性移除或设为 readonly + 样式灰化增强 UX。

总结：DOM 操作应“靶向精准”——绕过无关容器，直击目标表单元素；善用现代选择器替代冗余循环，既提升可读性，也降低出错概率。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南