如何简化JavaScript中复选框控制下拉框禁用与启用的重复代码？

先模拟你的现有代码（方便对比）：

原始HTML #

<input type="checkbox" id="toggle"> 禁用下拉框
<select id="select">
  <option>选项1</option>
  <option>选项2</option>
</select>

原始冗余JS #

document.getElementById('toggle').addEventListener('change', function() {
  if (this.checked) {
    document.getElementById('select').disabled = true;
  } else {
    document.getElementById('select').disabled = false;
  }
});

简化方案1：缓存DOM元素 + 直接复用布尔状态 #

这是最推荐的写法，既减少重复DOM查询，又砍掉冗余的条件判断：

// 提前获取DOM元素，避免重复查询
const toggle = document.getElementById('toggle');
const selectBox = document.getElementById('select');

toggle.addEventListener('change', function() {
  // 直接把checkbox的checked状态赋值给disabled（两者都是布尔值）
  selectBox.disabled = this.checked;
});

简化方案2：紧凑写法（适合简单场景） #

如果不想单独声明变量，也可以用箭头函数+事件对象的紧凑写法，但缓存元素的性能更好：

document.getElementById('toggle').addEventListener('change', e => {
  document.getElementById('select').disabled = e.target.checked;
});

核心优化点 #

1. 缓存DOM元素：避免每次事件触发都调用getElementById遍历DOM，提升性能同时减少代码重复。
2. 复用布尔状态：checkbox的checked属性本身就是布尔值，和disabled属性的取值完全匹配，直接赋值即可省去冗余的if-else判断。

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