javascript jquery select limit checkboxlist

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

I have two lists of checkboxes. First set is for agent and second for function. Now I want that the number of selected function must not exceeded the number of selected agent.

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

Solution

Just make things easier. Pass parameter ( onClick="doAction(this)" ) on your function and based upon agent checkbox length alert your warning message.

Example:

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