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

本文详解为何直接对 `

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

在使用 JavaScript 动态控制表格内表单元素时，一个典型误区是混淆 DOM 元素的可禁用（disabled）属性适用范围。disabled 是表单控件（如 <input>、<button></button>、<select></select>）的原生布尔属性，<td>、<code><tr>、<code><div> 等容器元素并不支持该属性——对它们赋值 <code>disabled = true 不会产生任何效果，也不会报错，极易造成调试困惑。

另一个关键问题是误用 document.getElementsByTagName()：该方法返回的是 HTMLCollection（类数组的实时节点列表），而非单个元素。因此 variable3.disabled = true 实际是对整个集合对象赋值，语法虽不报错，但逻辑完全失效。

✅ 正确做法是：直接选中目标 <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();

? 注意事项：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

• :nth-child(n) 的索引从 1 开始（非 0），对应 HTML 中 <tr> 的实际文档顺序；<li> <code>:not() 可叠加使用，灵活排除多行；
• 添加 [type="text"] 限定符可确保仅禁用文本框，避免误操作其他类型输入控件（如 checkbox）；
• 若需兼容旧版 IE（getAttribute('type') === 'text' 判断，但现代项目推荐使用上述标准写法。

? 扩展提示：若后续需动态启用，只需将 input.disabled = true 改为 input.disabled = false；也可结合 classList 添加 .disabled-input 样式类实现视觉反馈，提升用户体验。

此方案逻辑清晰、代码精简、语义明确，是纯 JavaScript 操作表格表单元素的推荐实践。