JSFiddle - React, Tailwind, and code Playground

HTML

<form action="some_file" method="">
  <div id="checkboxes">
    <input class="checkChange" type="checkbox" name="check" value="ch1">check 1
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch2">check 2
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch3">check 3
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch4">check 4
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch5">check 5
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch6">check 6
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch7">check 7
    <br>
    <input class="checkChange" type="checkbox" name="check" value="ch8">check 8
    <br>
  </div>

  <input type="submit" value="Submit">
</form>

JavaScript

$('.checkChange').change(function() {
  var count = 0;

  $('#checkboxes input:checked').each(function() {
    count++;
  });

  if (count >= 3) {
    $('#checkboxes input:not(:checked)').each(function() {
      $(this).attr("disabled", true);
    });
  } else {
    $('#checkboxes input:not(:checked)').each(function() {
      $(this).removeAttr('disabled');
    });
  }
});