点击Checkbox禁用input输入框失效，无论是否勾选均保持禁用如何解决？

API 探路者

2026-9-24

问题修复说明

存在的问题

条件判断逻辑错误：if判断中错误使用赋值运算符=代替相等判断运算符，checkAI.checked = true会强制将checkbox设为选中状态，且判断结果永远为true，导致else分支永不执行，输入框始终禁用。
缺少状态监听逻辑：当前的状态判断仅在页面初始化的立即执行函数中运行一次，用户后续点击checkbox时没有触发对应逻辑更新输入框状态。
变量声明缺失：p1、p2未添加声明关键字，会默认成为全局变量造成作用域污染。

修复后代码

JS代码

const Initialization = (function() {
  // 补全变量声明，限定作用域
  let p1 = '';
  let p2 = '';

  const playerOne = document.querySelector('#player1')
  const playerTwo = document.querySelector('#player2')
  const checkAI = document.querySelector('#computer')
  const startButton = document.querySelector('#start')

  startButton.addEventListener('click', () => {
    p1 = Player(playerOne.value)
    p2 = Player(playerTwo.value)
  })

  // 封装状态切换逻辑
  function syncPlayer2Status() {
    // 直接用checkbox的选中状态赋值给输入框的disabled属性，无需额外if判断
    playerTwo.disabled = checkAI.checked
  }

  // 初始化时执行一次，适配页面初始加载的checkbox状态
  syncPlayer2Status()
  // 绑定change事件，每次点击checkbox都同步更新输入框状态
  checkAI.addEventListener('change', syncPlayer2Status)

  return {
    p1,
    p2
  }
})();