如何用统一jQuery代码实现多组复选框与对应按钮的联动控制？

API 探路者

2026-5-20

一次性实现多组复选框与按钮的联动

没问题，完全可以避免重复写7次相同的代码！我们可以通过通用选择器+逻辑匹配的方式，用一段jQuery代码搞定所有组合的联动需求。下面给你两种实用的实现思路：

方案1：使用自定义数据属性（推荐，更灵活）

这种方式不依赖ID的命名规则，逻辑更清晰，后续维护也更方便。

首先给每组复选框和按钮添加关联标记（通过HTML的data-*属性）：

<!-- 第1组 -->
<input type="checkbox" id="checkbox_1" data-target-btn="#button_1">
<button id="button_1" class="disabled">按钮1</button>

<!-- 第2组 -->
<input type="checkbox" id="checkbox_2" data-target-btn="#button_2">
<button id="button_2" class="disabled">按钮2</button>

<!-- ... 以此类推到第7组 -->

然后编写一段通用的jQuery代码：

// 给所有带data-target-btn属性的复选框绑定change事件
$('[data-target-btn]').change(function() {
  // 获取当前复选框对应的目标按钮选择器
  const targetBtnSelector = $(this).data('target-btn');
  // 根据复选框的勾选状态，切换按钮的disabled类
  // toggleClass的第二个参数：true=添加类，false=移除类
  $(targetBtnSelector).toggleClass('disabled', !this.checked);
});

方案2：基于ID命名规则匹配（无需修改现有HTML）

如果你的HTML结构已经固定，不想改动，可以利用ID里的数字后缀来匹配对应的按钮：

直接编写这段jQuery代码即可：

// 选中所有ID以"checkbox_"开头的复选框
$('[id^="checkbox_"]').change(function() {
  // 从复选框ID中提取数字部分（比如从checkbox_3得到"3"）
  const groupNumber = this.id.split('_')[1];
  // 找到对应编号的按钮
  const targetButton = $(`#button_${groupNumber}`);
  // 根据勾选状态切换disabled类
  targetButton.toggleClass('disabled', !this.checked);
});