通用jQuery函数：基于复选框状态启用/禁用下拉列表

步骤1：统一HTML结构 #

给每个组件套一个父容器，确保复选框和下拉列表属于同一父元素，同时给它们加上通用类名：

<div class="component-wrap">
  <input type="checkbox" class="toggle-checkbox"> 启用该下拉
  <select class="controlled-select" disabled>
    <option>选项1</option>
    <option>选项2</option>
  </select>
</div>

<div class="component-wrap">
  <input type="checkbox" class="toggle-checkbox"> 启用该下拉
  <select class="controlled-select" disabled>
    <option>选项A</option>
    <option>选项B</option>
  </select>
</div>

步骤2：编写通用jQuery逻辑 #

通过类选择器绑定事件，利用DOM层级关系精准定位对应下拉：

$(function() {
  // 监听所有切换复选框的状态变化
  $('.toggle-checkbox').on('change', function() {
    // 找到当前复选框所在父容器内的目标下拉
    const $targetSelect = $(this).closest('.component-wrap').find('.controlled-select');
    // 根据复选框选中状态切换下拉的禁用状态
    $targetSelect.prop('disabled', !$(this).is(':checked'));
  });

  // 初始化同步状态（如果复选框默认选中，页面加载时自动启用下拉）
  $('.toggle-checkbox').trigger('change');
});

关键逻辑说明 #

• 类选择器替代ID：用.toggle-checkbox和.controlled-select统一选择元素，避免为每个组件写重复代码
• DOM层级定位：closest('.component-wrap')向上找到最近的父容器，确保只操作当前组件内的下拉，不会影响其他组件
• 状态同步：prop('disabled', !$(this).is(':checked'))直接关联复选框状态和下拉的禁用属性，逻辑清晰
• 初始化触发：页面加载时调用trigger('change')，避免默认选中的复选框对应的下拉仍处于禁用状态

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