JSFiddle - React, Tailwind, and code Playground

by davehol

JavaScript

if (checkedChecks.length >= max) {
  //return false;
  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked == false) {
      //alert("checked");
      checks[i].disabled = true;
    }
  }

} else {
  for (var i = 0; i < checks.length; i++) {
    checks[i].disabled = false;
  }
}


for (var i = 0; i < checks.length; i++) {
  if (checkedChecks.length >= max) {
    if (checks[i].checked == false) {
      checks[i].disabled = true;
    }
  } else {
    checks[i].disabled = false;
  }
}


(function() {
  document.addEventListener("DOMContentLoaded", function(event) {
    var checks = document.querySelectorAll(".calc-total");
    var checkboxes = document.getElementById("tfa_4");
    var max = 2;
    var checkedChecks;
    for (var i = 0; i < checks.length; i++)
      checks[i].onclick = selectiveCheck;

    function selectiveCheck() {
    	checkedChecks = document.querySelectorAll(".calc-total:checked");
      for (var i = 0; i < checks.length; i++) {
        if (checkedChecks.length >= max) {
          if (checks[i].checked == false) {
            //alert("checked");
            checks[i].disabled = true;
          }

        } else {
          checks[i].disabled = false;
        }
      }
    }
    wFORMS.behaviors.validation.onFail = function(e) {
      var keys = Object.keys(e.elementsInError);
      alert("The form is not complete and has not been submitted yet. There " + (keys.length > 1 ? 'are ' : 'is ') + keys.length + " problem" + (keys.length > 1 ? 's' : ''));
      var checkErr = document.getElementById("tfa_14-E");
      var checkErrParent = document.getElementById("tfa_4-D");
      checkErrParent.classList.add("errFld");
      if (checkErr) {
        checkboxes.parentNode.after(checkErr);
      }
    }
    //wFORMS.showAlertOnError = false;
  });
})();