I want a hidden field to be required but when selecting another option this required hidden field is disabled, how?

Question

I have a field called collection type and I have 4 options where each corresponds to a different hidden field which are "Ad Hoc", "Daily", "Weekly", "Monthly". These 4 different options will display different hidden input fields

So "Weekly" is the checkbox I would like to be required but as I have this input field as required when I select another option for collection type and press done button I will get an error like

An invalid form control with name='monday' is not focusable.

How can I fix this? Sorry my form is pretty massive

if ($("#select-Collection-Type").val() === "Ad Hoc") {
  $('.change-date-collection').removeAttr('hidden');
} else {
  $('.change-date-collection').attr('hidden', '');
} // Make the Hide appear when select the correct value for the 3 option if($("#select-Collection-Type").val()
===
"Daily" | $("#select-Collection-Type").val() === "Monthly" | $("#select-Collection-Type").val() === "Weekly") {
  $('.change-date-collection1').removeAttr('hidden');
} else {
  $('.change-date-collection1').attr('hidden', '');
} // this is for Weekly if($("#select-Collection-Type").val()
===
"Weekly") {
  $('.position').removeAttr('hidden');
} else {
  $('.position').attr('hidden', '');
} // this is for Monthly if($("#select-Collection-Type").val() === "Monthly"){ $('.position1').removeAttr('hidden'); } else{ $('.position1').attr('hidden',
'');
}

<div class="col-4">
  <label for="select-Collection-Type" class="col-form-label">Collection
                                                         Type</label>
  </br>
  <select oninvalid="this.setCustomValidity('Please select a valid Collection Type.')" oninput="this.setCustomValidity('')" class="select-Collection-Type custom-select-sm" id="select-Collection-Type" required>
    <option selected disabled value="">Select ....</option>
  </select>
</div>


<div class="col-4">
  <div class="change-date-collection col-12" hidden>
    <label for="Date Collected" class=" col-form-label dateofcollection">Date of
                                                             collection</label>
    <input data-role="datepicker" id="change-date-collection" name="date" data-bind="value: selectedDate" style="width: 100%;font-size:.875rem">
    <span class="k-invalid-msg" data-for="date"></span>
  </div>
  <div class="change-date-collection1 col-12" hidden>
    <label for="Date Collected" class=" col-form-label dateofcollection">Date of first
                                                             collection</label>
    <input data-role="datepicker" id="change-date-collection1" name="date" data-bind="value: selectedDate" style="width: 100%;font-size:.875rem">
    <span class="k-invalid-msg" data-for="date"></span>
  </div>
</div>

<div class="col-3">
  <div class="position" hidden>
    <input class="weeklyInput" type="text" name="weekly" value="0" min="0" max="7" readonly><label class="textweekly">times per week</label>
    <div>
      <div id="box" class="box">
        <input type="checkbox" class="weekly-day" id="monday" name="monday" value="Monday" oninvalid="this.setCustomValidity('Please select at least one option to proceed')" oninput="this.setCustomValidity('')">
        <label for="monday"> Monday</label><br>
        <input type="checkbox" class="weekly-day" id="tuesday" name="tuesday" value="Tuesday">
        <label for="tuesday"> Tuesday</label><br>
        <input type="checkbox" class="weekly-day" id="wednesday" name="wednesday" value="Wednesday">
        <label for="wednesday"> Wednesday</label><br>
        <input type="checkbox" class="weekly-day" id="thursday" name="thursday" value="Thursday">
        <label for="thursday"> Thursday</label><br>
        <input type="checkbox" class="weekly-day" id="friday" name="friday" value="Friday">
        <label for="Friday"> Friday</label><br>
        <input type="checkbox" class="weekly-day" id="saturday" name="saturday" value="Saturday">
        <label for="saturday"> Saturday</label><br>
        <input type="checkbox" class="weekly-day" id="sunday" name="sunday" value="Sunday">
        <label for="Sunday"> Sunday</label><br>
      </div>
    </div>
  </div>
  <div class="position1" hidden>
    <input class="monthlyInput" id="start-day" name="monthly" type="number" value="1" min="1" max="28">
    <label class="monthlyInputStyle">-</label>
    <input id="end-day" class="monthlyInput" name="monthly" type="number" value="1" min="1" max="28">
    <label class="monthlyInputStyle">day of the month</label>
  </div>