如何基于一组复选框选中数量限制另一组复选框的最大可选数量

需求说明 #

有两组复选框：

• 第一组为agent类复选框
• 第二组为function类复选框
  需要实现的规则：选中的function类复选框数量 不能超过 选中的agent类复选框数量。

原有代码问题 #

原有代码存在两个核心错误：

1. 选择器误用：$(".fonction :selected")是用于获取下拉菜单选中项的选择器，复选框的选中状态需要用:checked选择器获取
2. 逻辑颠倒：原有代码限制的是agent选中数量不能超过function选中数量，和要求的规则完全相反

修正后可运行代码 #

JS逻辑 #

function doAction(e) {
  // 统计选中的agent数量
  const checkedAgentCount = $(".agent:checked").length;
  // 统计选中的function数量
  const checkedFuncCount = $(".fonction:checked").length;

  // 仅当当前操作的是function类复选框，且选中的function数量超过agent数量时触发限制
  if (e.target.classList.contains('fonction') && checkedFuncCount > checkedAgentCount) {
    e.target.checked = false;
    alert('Limite atteinte ! 选中的功能数量不能超过选中的agent数量');
  }

  // 可选补充逻辑：如果取消勾选agent后，已选function数量超过新的agent数量，自动取消多余的function勾选
  // if (e.target.classList.contains('agent') && checkedFuncCount > checkedAgentCount) {
  //   const excessCount = checkedFuncCount - checkedAgentCount;
  //   $(".fonction:checked").slice(-excessCount).prop('checked', false);
  //   alert(`已自动取消${excessCount}个功能的选中，功能选中数不能超过agent选中数`);
  // }
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="agent" onClick="doAction(event)"> Agent 1
<br>
<input type="checkbox" class="agent" onClick="doAction(event)"> Agent 2
<br>
<input type="checkbox" class="agent" onClick="doAction(event)"> Agent 3
<br>
<input type="checkbox" class="agent" onClick="doAction(event)"> Agent 4
<br>
<input type="checkbox" class="agent" onClick="doAction(event)"> Agent 5
<hr>
<input type="checkbox" class="fonction" onClick="doAction(event)"> Fonction 1
<br>
<input type="checkbox" class="fonction" onClick="doAction(event)"> Fonction 2
<br>
<input type="checkbox" class="fonction" onClick="doAction(event)"> Fonction 3
<br>
<input type="checkbox" class="fonction" onClick="doAction(event)"> Fonction 4
<br>
<input type="checkbox" class="fonction" onClick="doAction(event)"> Fonction 5

补充说明 #

修正后的代码默认仅限制新增勾选function时不超过agent数量，如果你需要在减少agent选中数时自动取消多余的function勾选，放开注释的可选逻辑即可。

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