本文详解如何使用 javascript 实现复选框（checkbox）与输入框（input）的联动：初始加载时即按复选框默认状态正确设置输入框的 `readonly` 属性，并在用户交互时实时响应状态变更。
你遇到的问题很典型：JavaScript 事件监听器（如 change）仅在用户触发交互时执行，而页面首次加载时并不会自动运行——因此即使复选框默认为未勾选（checked = false），input 元素也不会被初始化为 readonly 状态。
要解决这个问题，需确保 初始化逻辑与事件逻辑保持一致。推荐采用以下两种方式之一（或组合使用）：
✅ 方案一：显式调用初始化函数（推荐）
将状态同步逻辑封装为独立函数，既用于事件响应，也用于页面加载时立即执行：
<input type="checkbox" id="check_pt"><input type="text" id="pi_pt" placeholder="可编辑文本">
function syncReadOnlyState() {
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
if (!checkbox.checked) {
inputElement.setAttribute("readonly", "readonly"); // 推荐值为 "readonly"，非 "true"
} else {
inputElement.removeAttribute("readonly");
}
}
// 页面加载完成后立即同步状态
document.addEventListener("DOMContentLoaded", syncReadOnlyState);
// 同时监听后续变更
const checkbox = document.getElementById("check_pt");
checkbox.addEventListener("change", syncReadOnlyState);
? 注意：readonly 是布尔属性，其存在即生效，标准写法应设为 "readonly"（HTML 规范建议），而非 "true"；浏览器虽兼容 "true"，但语义不准确。
✅ 方案二：纯 HTML 初始化 + JS 增强（更简洁）
若复选框的初始状态固定（如始终默认未勾选），可直接在 HTML 中声明 readonly，再由 JS 动态移除：
<input type="checkbox" id="check_pt"><input type="text" id="pi_pt" readonly placeholder="默认只读">
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
checkbox.addEventListener("change", function() {
if (this.checked) {
inputElement.removeAttribute("readonly");
} else {
inputElement.setAttribute("readonly", "readonly");
}
});
该方式无需额外初始化调用，语义清晰、容错性高。
⚠️ 注意事项总结
- ❌ 不要依赖 setAttribute("readonly", "true") —— 正确值是 "readonly" 或直接使用 element.readOnly = true/false（DOM 属性方式更直观）；
- ✅ 推荐使用 DOM 属性操作（inputElement.readOnly = !checkbox.checked），它更可靠且无需处理字符串值；
- ? 若复选框状态可能由服务端或 JS 动态预设（如 checkbox.checked = true 在 JS 中设置），务必在设置后手动调用同步函数，否则 input 状态会滞后；
- ? 所有 DOM 操作应在 DOMContentLoaded 或 window.onload 后执行，避免元素未挂载导致获取失败。
通过以上任一方案，即可确保页面加载瞬间与用户交互时，复选框与输入框的只读状态始终保持严格一致。
