网站开发：页面加载时未勾选Checkbox对应输入框无readonly属性，切换后正常？

问题描述 #

开发网站时需要实现：当指定Checkbox未勾选时，对应输入框添加readonly属性；勾选Checkbox时，移除输入框的readonly属性。目前遇到的问题是：页面加载完成后，Checkbox处于未勾选状态，但输入框并未自动设置readonly属性；只有勾选再取消勾选Checkbox后，输入框才能正常获得readonly属性。

现有代码 #

const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");

checkbox.addEventListener("change", function() {
  if (!(checkbox.checked)) {
    inputElement.setAttribute("readonly", "true");
  } else {
    inputElement.removeAttribute("readonly"); 
  }
});

原因分析 #

你的代码仅在Checkbox的change事件触发时才执行状态切换逻辑，但页面加载完成后，并没有主动触发一次这个逻辑来初始化输入框的状态。页面加载时Checkbox默认是未勾选的，但此时change事件并未触发，所以输入框的readonly属性不会被设置；只有当你手动操作Checkbox（勾选再取消）触发了change事件后，逻辑才会执行，输入框才会被加上readonly属性。

解决方案 #

只需要在页面加载完成后，主动执行一次状态判断逻辑即可。推荐把状态切换逻辑抽成复用函数，既绑定到change事件，又在初始化时调用：

const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");

// 封装状态切换逻辑为复用函数
function toggleInputReadonly() {
  if (!checkbox.checked) {
    inputElement.setAttribute("readonly", "true");
  } else {
    inputElement.removeAttribute("readonly"); 
  }
}

// 绑定change事件
checkbox.addEventListener("change", toggleInputReadonly);

// 页面加载时初始化输入框状态
toggleInputReadonly();

或者也可以不封装函数，直接在绑定事件后单独执行一次初始化判断：

const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");

checkbox.addEventListener("change", function() {
  if (!(checkbox.checked)) {
    inputElement.setAttribute("readonly", "true");
  } else {
    inputElement.removeAttribute("readonly"); 
  }
});

// 初始化执行一次状态设置
if (!checkbox.checked) {
  inputElement.setAttribute("readonly", "true");
}

内容的提问来源于stack exchange，提问作者user20733481