如何通过复选框动态控制输入框的只读状态

本文详解如何使用 javascript 实现复选框（checkbox）与输入框（input）的联动：初始加载时即按复选框默认状态正确设置输入框的 `readonly` 属性，并在用户交互时实时响应状态变更。

你遇到的问题很典型：JavaScript 事件监听器（如 change）仅在用户触发交互时执行，而页面首次加载时并不会自动运行——因此即使复选框默认为未勾选（checked = false），input 元素也不会被初始化为 readonly 状态。

要解决这个问题，需确保 初始化逻辑

与事件逻辑保持一致。推荐采用以下两种方式之一（或组合使用）：

✅ 方案一：显式调用初始化函数（推荐）

将状态同步逻辑封装为独立函数，既用于事件响应，也用于页面加载时立即执行：

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 动态移除：

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 后执行，避免元素未挂载导致获取失败。

通过以上任一方案，即可确保页面加载瞬间与用户交互时，复选框与输入框的只读状态始终保持严格一致。