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>

I assume you mean something like this: https://jsfiddle.net/7fL6ocs9/5/ ? — , Jan 07 '18 at 14:42
@ChrisG This is the exact result that i want.... So looping the variable is better than saving each column as a differently? — Imnotapotato, Jan 07 '18 at 14:48
@ChrisG is there a more organized way to write the code you submitted following the structure of my code? — Imnotapotato, Jan 07 '18 at 14:56
I guess so, I focused on making it work. It sounds like your question is better suited for https://codereview.stackexchange.com/ — , Jan 07 '18 at 14:58
Tnx. Apparently, the jQuery set in my project is `jQuery JavaScript Library v1.3.2` and it doesn't support the "find" built-in function. is there any other workaround this one? @ChrisG — Imnotapotato, Jan 07 '18 at 15:14
@ChrisG `TypeError: this.$reportSchedule.querySelector is not a function` :( — Imnotapotato, Jan 07 '18 at 15:17
It's not a jQuery function. And it's not my job to point you to Google. Do at least some basic research. — , Jan 07 '18 at 15:25

score 0 · Accepted Answer · answered Jan 17 '18 at 13:13

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.

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

1 Answers1