根据另一个复选框列表限制可能选中的复选框的数量

Question

我有两个复选框列表。第一组用于代理，第二组用于功能。现在我希望选择的功能数量不能超过选择的代理数量。

function doAction() {
  var nbreFonction = $(".fonction :selected").length;
  var max = nbreFonction;
  var agent = 0;
  var checkboxes = document.getElementsByClassName("agent");
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes.item(i).checked == true) {
      agent++
      if (agent > max) {
        checkboxes.item(i).checked = false;
        window.alert('Limite atteinte !');
      }
    }
  }
}

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

Answer 1

只是让事情变得更简单。在您的函数上传递参数 ( onClick="doAction(this)" )，并根据代理 checkbox 长度提醒您的警告消息。

示例：

function doAction(param) {
  var checkboxes = $('.agent').filter(':checked').length
  var nbreFonction = $(".fonction").filter(':checked').length;
  if (nbreFonction > checkboxes) {
    $(param).prop('checked', false);
    alert('Limite atteinte !');
  }
}

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

根据另一个复选框列表限制可能选中的复选框的数量

Limit the number of possible selected checkbox depending in another checkbox list

jquery

select

limit

checkboxlist