本文详解为何复选框初始未触发 `change` 事件导致输入框未按预期设为只读，并提供初始化同步 + 实时响应的完整解决方案。
在 Web 表单开发中，常需根据复选框（<input type="checkbox">）的状态动态控制关联输入框的可编辑性。你遇到的问题很典型：JavaScript 仅监听 change 事件，而该事件仅在用户交互后触发，因此页面首次加载时，即使复选框默认为未勾选（checked = false），绑定的逻辑也不会执行——输入框自然不会被加上 readonly 属性。
✅ 正确做法：初始化 + 监听双保障
你需要在页面加载完成时立即同步输入框状态，再绑定事件监听。推荐使用 DOMContentLoaded 或直接在 DOM 就绪后执行初始化逻辑：
<input type="checkbox" id="check_pt"> <input type="text" id="pi_pt" placeholder="仅当勾选时可编辑">
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
// ✅ 核心：定义状态同步函数（可复用）
function syncReadOnlyState() {
if (checkbox.checked) {
inputElement.removeAttribute("readonly");
} else {
inputElement.setAttribute("readonly", "readonly"); // 推荐值为 "readonly"，非 "true"
}
}
// ✅ 第一步：页面加载时立即同步初始状态
syncReadOnlyState();
// ✅ 第二步：监听后续用户操作
checkbox.addEventListener("change", syncReadOnlyState);? 注意细节：setAttribute("readonly", "readonly") 是标准写法（HTML 规范中 readonly 是布尔属性，其存在即生效，值本身无语义；但为兼容性和可读性，建议设为 "readonly" 而非 "true"）；避免使用 inputElement.readOnly = true/false（JS 属性）与 setAttribute/removeAttribute（DOM 属性）混用，否则可能因同步延迟导致状态不一致；若复选框在 HTML 中已声明 checked（如 <input ... checked>），checkbox.checked 会准确反映初始值，无需额外判断。
? 进阶建议：使用 disabled？还是 readonly？
- readonly：输入框可见、可聚焦、内容可复制，但不可编辑 → 适合本场景（保留表单语义与可用性）；
- disabled：完全禁用，不可聚焦、不可提交、样式灰化 → 若需彻底隔离交互，可选用，但需注意：disabled 字段不会随表单提交。
✅ 总结
问题根源在于事件驱动逻辑缺失初始化环节。解决的关键是：将状态同步逻辑提取为独立函数，并在 DOM 加载后立即调用一次，再交由 change 事件持续维护。这样既保证首屏渲染符合业务规则，又确保后续交互实时响应，实现健壮、可维护的表单控制逻辑。
