JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<div>max. checks</div>
<input id="max" type="number" value="2">
</p>

<ul>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
<li><input class="checkers" type="checkbox" name="foobar[]"></li>
</ul>

JavaScript

var boxes = document.querySelectorAll('.checkers');
var checkedCount = 0;

boxes.forEach((i) => {
	i.addEventListener('click', function(e) {

		let maxChecks = document.querySelector('#max').value;
    checkedCount = document.querySelectorAll('.checkers:checked').length;
  	
    if (checkedCount > maxChecks)
    	this.checked = false;
  });
});