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>
This is my full solution for this kind of task:
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.