模块化 JS：Onclick 复选框 => 为更多选项启用单选按钮 - 使用模块化 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

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

我使用了只要主数组变量发生任何变化就会触发的渲染函数。希望这对那里的任何人都有帮助。

模块化 JS：Onclick 复选框 => 为更多选项启用单选按钮 - 使用模块化 js 执行此操作的正确方法是什么？

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

javascript

jquery

modular

modular-design