Modular JS: Onclick checkbox => enable radio buttons for more options - What is the right way doing this using modular js?

Question

This is my current code: https://jsfiddle.net/7fL6ocs9/1/

I have a 3 columns of radio buttons that should be enabled only by clicking the checkbox above them.

What is the right way doing this using modular js?

Selecting each checkbox separately in my "cacheDom" method? Doesn't this make it not so modular?

/******************/
/** Set Schedule **/
/******************/
(function() {

  var schedule = {

    report: [],
    template: $('#report_schedule').html(),

    // Init functions
    init: function() {
      this.cacheDom();
      this.bindEvents();
    },
    // Cache elements from DOM
    cacheDom: function() {
      this.$setScheduleBtn = $('#setScheduleBtn');
      this.$reportSchedule = $('#reportSchedule');
      this.$checkBoxes = $('fieldset > input[type="checkbox"]');
      console.log(this.$checkBoxes);
    },
    // Set events
    bindEvents: function() {
      this.$setScheduleBtn.click(this.showReportScheduler.bind(this));
    },

    // Display on click
    showReportScheduler: function() {
      this.$reportSchedule.slideToggle("fast");
    }


  };
  schedule.init();

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<span class="btn" id="setScheduleBtn">Set Schedule</span>
<div id="reportSchedule" name="reportSchedule" style="">

  <fieldset class="report-type" style="width:32%; display: inline-block;">
    <legend>
      <input type="checkbox" name="weekly" id="weekly">
      <label for="weekly">Weekly:</label>
    </legend>

    <input type="radio" id="week" name="week" checked="checked" disabled>
    <label for="week">3 Months</label>

  </fieldset>

  <fieldset class="report-type" style="width:32%; display: inline-block;">
    <legend>
      <input type="checkbox" name="monthly" id="monthly">
      <label for="monthly">Monthly:</label>
    </legend>

    <input type="radio" id="monthly1" name="monr" disabled>
    <label for="monthly1">1 Month</label>

    <input type="radio" id="monthly3" name="monr" disabled>
    <label for="monthly3">3 Months</label>

    <input type="radio" id="monthly6" name="monr" disabled>
    <label for="monthly6">6 Months</label>

  </fieldset>

  <fieldset class="report-type" style="width:32%; display: inline-block;">
    <legend>

      <input type="checkbox" name="quarterly" id="quarterly">
      <label for="quarterly">Quarterly:</label>
    </legend>

    <input type="radio" id="quarterly3" name="quar" disabled>
    <label for="quarterly3">3 Months</label>

    <input type="radio" id="quarterly6" name="quar" disabled>
    <label for="quarterly6">6 Months</label>

    <input type="radio" id="quarterly12" name="quar" disabled>
    <label for="quarterly12">12 Months</label>

  </fieldset>

</div>

Answer 1

This is my full solution for this kind of task:

Modular JS: global functionality on 3 sections (checkboxes and radios) & Sholud I apply "rendering" in my code?

I have used a render function triggered whenever there is any change with the main array variable. hope this is helpful for anyone out there.