本文详解如何在页面加载时即按复选框初始状态同步设置输入框的 `readonly` 属性，并确保后续交互（勾选/取消勾选）实时生效，避免因遗漏初始化导致的逻辑不一致问题。
在 Web 表单开发中，常需根据复选框（）的状态动态启用或禁用关联输入框的编辑能力。你提供的 JavaScript 代码逻辑正确——监听 change 事件并在勾选状态变化时切换 readonly 属性，但存在一个关键疏漏：事件监听器仅响应用户交互，不处理页面首次加载时的初始状态同步。
这意味着：若 HTML 中复选框默认为 unchecked（未勾选），而输入框初始未设 readonly，则页面一打开就处于“不合规”状态——复选框未勾选，输入框却可编辑。只有当用户首次操作（如勾选再取消）后，逻辑才开始生效。
✅ 正确做法是：将状态同步逻辑封装为独立函数，并在 DOM 加载完成时立即执行一次，再绑定事件监听。以下是优化后的完整实现：
<!-- 示例 HTML --> <input type="checkbox" id="check_pt" /> <input type="text" id="pi_pt" placeholder="仅在勾选时可编辑" />
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);
});? 注意事项与最佳实践：
立即学习“Java免费学习笔记（深入）”；
- 使用 setAttribute("readonly", "readonly") 而非 "true"：HTML 规范中 readonly 是布尔属性，其存在即生效，值建议统一用 "readonly"（部分浏览器对 "true" 兼容性不佳）；
- 避免在 HTML 中硬编码 readonly 属性来“模拟初始状态”：这会与 JS 逻辑耦合，且无法响应 JS 动态控制；
- 若复选框有 checked 属性（如 ），checkbox.checked 会正确返回 true，syncReadonlyState() 仍将准确应用；
- 对于更复杂场景（如多个联动控件、表单重置），可进一步封装为可复用的 toggleReadonlyOnCheckbox() 工具函数。
通过显式初始化 + 事件驱动的双重保障，即可确保表单状态从首帧渲染起就严格符合业务规则，提升用户体验与代码健壮性。
