JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<script src="https://rawgit.com/kinduff/limitcheckbox/master/build/limitcheckbox-min.js"></script>
Try to select 4 checkboxes.
<div id="checkboxes">
    <input type="checkbox" /> <!-- 1 -->
    <input type="checkbox" /> <!-- 2 -->
    <input type="checkbox" /> <!-- 3 -->
    <input type="checkbox" /> <!-- 4 -->
    <input type="checkbox" /> <!-- 5 -->
</div>

Try to select 3 checkboxes.
<div id="checkboxes2">
    <input type="checkbox" /> <!-- 1 -->
    <input type="checkbox" /> <!-- 2 -->
    <input type="checkbox" /> <!-- 3 -->
</div>

Limitcheckbox.js will verify the checked checkboxes when called.
<div id="checkboxes3">
    <input type="checkbox" checked /> <!-- 1 -->
    <input type="checkbox" /> <!-- 2 -->
    <input type="checkbox" checked /> <!-- 3 -->
    <input type="checkbox" /> <!-- 4 -->
    <input type="checkbox" checked /> <!-- 5 -->
</div>

CSS

input {
    zoom: 3;
}

JavaScript

$('#checkboxes').limitCheckbox(3, {
    callback: function () {
        alert('All selected');
    }
});
$('#checkboxes2').limitCheckbox();
$('#checkboxes3').limitCheckbox(3);