JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<label><input type="checkbox" name="a" value="1" />A</label>
<label><input type="checkbox" name="b" value="1" />B</label>
<label><input type="checkbox" name="c" value="1" />C</label>
<label><input type="checkbox" name="d" value="1" />D</label>
<label><input type="checkbox" name="e" value="1" />E</label>
<label><input type="checkbox" name="f" value="1" />F</label>
<label><input type="checkbox" name="g" value="1" />G</label>

JavaScript

let min = 0,
    max = 0;
const x = window.matchMedia("(max-width: 600px)");
const checkboxes = document.querySelectorAll("input[type='checkbox']");

function setMaxMin(x) {
    min = 3, max = 5;
    if (x.matches) {
        min = 2, max = 3;
    }
}


setMaxMin(x) // Call listener function at run time
x.addListener(setMaxMin) // Attach listener function on state changes

console.log(min, max);

//add event listener
for (const checkbox of checkboxes) {
    checkbox.addEventListener('change', onChange);
}

//on change:
function onChange(e) {
    //get the count of checked fields
    let checkedCount = document.querySelectorAll("input[type='checkbox']:checked").length;
    if (checkedCount > max) {
        e.target.checked = false; //deselect
    } else if (checkedCount < min) {
        e.target.checked = true; //select
    }
}