模块化JS：Onclick checkbox =＆gt;启用单选按钮以获得更多选项 - 使用模块化js执行此操作的正确方法是什么？

Question

这是我目前的代码：https://jsfiddle.net/7fL6ocs9/1/

我有3列单选按钮，只有单击上面的复选框才能启用。

使用模块化js执行此操作的正确方法是什么？

在我的“cacheDom”方法中分别选中每个复选框？这不是因为它不是那么模块化吗？

/******************/
/** 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

这是我完成此类任务的完整解决方案：

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

每当主数组变量发生任何变化时，我都会使用一个渲染函数。希望这对那里的任何人都有帮助。