动态生成复选框绑定addEventListener出现Cannot set property of null报错如何解决

错误Uncaught TypeError: Cannot set property 'disabled' of null的核心触发原因是 document.getElementById('Price' + this.id) 没有查询到匹配的DOM元素，返回了null值，再操作disabled属性就会抛出异常。常见的诱因有3种：

• ID兼容性问题：你给复选框设置的ID是纯数字的循环变量j，虽然HTML5规范允许ID为纯数字，但部分老旧浏览器对纯数字ID的查询支持存在缺陷，可能导致查询失败
• 循环边界不匹配：你的循环终止条件是j < size，如果size的取值大于response.data的实际长度，部分循环项不会正常生成对应的文本输入框，触发空值查询
• 重复ID冲突：如果这段代码被多次执行，会生成重复ID的元素，DOM查询时可能出现预期外的结果，极端情况会返回null

完全不需要依赖ID查询DOM，利用JavaScript的闭包特性，直接在事件回调中持有对应文本输入框的引用即可，既规避了所有ID相关问题，性能也更优。只需修改复选框的事件绑定逻辑：

// 替换原有addEventListener绑定逻辑即可
checkbox.addEventListener('change', function () {
  // 直接使用当前循环迭代生成的text变量引用，无需查询DOM
  text.disabled = !this.checked
})

如果要保留原有ID查询的逻辑，只需给ID增加非数字前缀，规避纯数字ID的兼容性问题即可：

1. 修改复选框ID设置逻辑，增加前缀：

checkbox.setAttribute('id', `sale-checkbox-${j}`)

2. 修改事件回调中的查询逻辑：

checkbox.addEventListener('change', function () {
  const targetId = 'Price' + this.id.replace('sale-checkbox-', '')
  document.getElementById(targetId).disabled = !this.checked
})

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