如何通过 JavaScript 动态控制输入框的只读状态以响应复选框变化

本文详解如何在页面加载时即按复选框初始状态同步设置输入框的 `readonly` 属性，并确保后续交互（勾选/取消勾选）实时生效，避免因遗漏初始化导致的逻辑不一致问题。

在 Web 表单开发中，常需根据复选框（）的状态动态启用或禁用关联输入框的编辑能力。你提供的 JavaScript 代码逻辑正确——监听 change 事件并在勾选状态变化时切换 readonly 属性，但存在一个关键疏漏：事件监听器仅响应用户交互，不处理页面首次加载时的初始状态同步。

这意味着：若 HTML 中复选框默认为 unchecked（未勾选），而输入框初始未设 readonly，则页面一打开就处于“不合规”状态——复选框未勾选，输入框却可编辑。只有当用户首次操作（如勾选再取消）后，逻辑才开始生效。

✅ 正确做法是：将状态同步逻辑封装为独立函数，并在 DOM 加载完成时立即执行一次，再绑定事件监听。以下是优化后的完整实现：

document.addEventListener('DOMContentLoaded', () => {
  const checkbox = document.getElementById("check_pt");
  const inputElement = document.getElementById("pi_pt");

  // 封装同步逻辑：根据 checkbox 当前状态设置 input 的 readonly
  const syncReadonlyState = () => {
    if (checkbox.checked) {
      inputElement.removeAttribute("readonly");
    } else {
      inputElement.setAttribute("readonly", "readonly"); // 推荐使用 "readonly" 作为值，语义更规范
    }
  };

  // 页面加载时立即同步一次
  syncReadonlyState();

  // 绑定 change 事件，后续交互自动更新
  checkbox.addEventListener("change", syncReadonlyState);
});

? 注意事项与最佳实践：

• 使用 setAttribute("readonly", "readonly") 而非 "true"：HTML 规范中 readonly 是布尔属性，其存在即生效，值建议统一用 "readonly"（部分浏览器对 "true" 兼容性不佳）；
• 避免在 HTML 中硬编码 readonly 属性来“模拟初始状态”：这会与 JS 逻辑耦合，且无法响应 JS 动态控制；
• 若复选框有 checked 属性（如 ），checkbox.checked 会正确返回 true，syncReadonlyState() 仍将准确应用；
• 对于更复杂场景（如多个联动控件、表单重置），可进一步封装为可复用的 toggleReadonlyOnCheckbox() 工具函数。

通过显式初始化 + 事件驱动的双重保障，即可确保表单状态从首帧渲染起就严格符合业务规则，提升用户体验与代码健壮性。