Question about required checkbox

Question about required checkbox

What do I have wrong here? I'm trying to create two scenarios. One checkbox will always be displayed no matter what's included in the URL string. If that's the only checkbox that's visible on the page, it must be checked before submitting the form. 

However, If 'ref' is present in the URL string (foo.com?ref=201), a second checkbox will appear and one of the two checkboxes needs to be checked. The problem is that when 'ref' is not present in the URL, it's still in the form with 'checked', so the form thinks something is checked.

  1. <input type="checkbox" id="refSource" name="refSource" value="on" class="check custom-class" checked>
When a visitor arrives without 'ref' in the URL, even though it's hidden, the form still thinks something is checked and allows a form submission. We need to require that the one checkbox that is displayed is checked in order to submit the form. 
  2. const checkedBoxCount = checkboxes.filter(isChecked).length; 
  3. if ((!checkedBoxCount) || (url.indexOf('ref') !== -1 && checkedBoxCount < 1)) { 
  4.    $("#checkboxAlert").show();
  5.    window.scrollTo(0, 0); 
  6.    event.preventDefault();
Another way to approach this would be to add 'checked' to the checkbox only if 'ref' is present in the URL, but I thought I'd try the above approach first.