使用复选框禁用多项选择

Question

My code is a mess, sorry about that.

The JS works but only for the first select; I want the user to input a time, but if the user does not work that day, I want to disable the four select boxes. Unfortunately, I don't know where to add the other selects in the JS.

There's another script that fills in the rest of the options for the selects. The code I have so far:

 if (document.getElementById('holiday_check').checked) document.getElementById('holiday_time_h1').setAttribute('disabled', 'disabled'); function closed_holiday() { if (document.getElementById('holiday_check').checked) document.getElementById('holiday_time_h1').setAttribute('disabled', 'disabled'); else document.getElementById('holiday_time_h1').removeAttribute('disabled'); } 

 <div> <span>Opening Time:</span> <select id="holiday_time_h1"><option>00</option></select> : <select id="holiday_time_m1"><option>00</option></select> <span>Closing time</span> <select id="holiday_time_h2"><option>00</option></select> : <select id="holiday_time_m2"><option>00</option></select> <input id="holiday_check" class="check" type="checkbox" onchange="closed_holiday();">Closed</input> </div> 

Answer 1

There is multiple ways to abort this problem. The most common and abordable way is to loop through each select and disable them one by one.

First, you need to get an array for each select element that you want to disable. You can attach to them the same class; let's say "holiday", then get all of them in an array using the selector getElementsByClassName() or querySelector() .

Once you've done that, you loop through this array of elements and you disable them when the user choose to disable via the checkbox element.

 const mySelectElements = document.getElementsByClassName("holiday"); const holidayCheck = document.getElementById("holiday_check"); function closed_holiday(){ for(let selectElement of mySelectElements){ if(holidayCheck.checked){ selectElement.setAttribute('disabled', 'disabled'); } else{ selectElement.removeAttribute('disabled'); } } } 

 <div> <span>Opening Time:</span> <select class="holiday" id="holiday_time_h1"><option>00</option></select> : <select class="holiday" id="holiday_time_m1"><option>00</option></select> <span>Closing time</span> <select class="holiday" id="holiday_time_h2"><option>00</option></select> : <select class="holiday" id="holiday_time_m2"><option>00</option></select> <input id="holiday_check" class="check" type="checkbox" onchange="closed_holiday();">Closed</input> </div> 

Answer 2

Note that this uses jquery's $.each to iterate over the arrays.

Also, here I am using wildcards to select all elements that begin with id holiday_check and then looping over them and disabling them.

 function closed_holiday() { if (document.getElementById('holiday_check').checked) { var checkboxes = document.querySelectorAll('[id^=holiday_time]'); //Jquery Solution //$.each(checkboxes, function() { // this.setAttribute('disabled', 'disabled'); //}); for (i=0; i<checkboxes.length; i++){ checkboxes[i].setAttribute('disabled', 'disabled'); } } else { var checkboxes = document.querySelectorAll('[id^=holiday_time]'); //Jquery solution //$.each(checkboxes, function() { // this.removeAttribute('disabled'); //}); for (i=0; i<checkboxes.length; i++){ checkboxes[i].removeAttribute('disabled'); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span>Opening Time:</span> <select id="holiday_time_h1"> <option>00</option> </select> : <select id="holiday_time_m1"> <option>00</option> </select> <span>Closing time</span> <select id="holiday_time_h2"> <option>00</option> </select> : <select id="holiday_time_m2"> <option>00</option> </select> <input id="holiday_check" class="check" type="checkbox" onchange="closed_holiday();">Closed</input> </div> 

Answer 3

Since you're looking to disable multiple <select> elements at a time, applying a class name to each of them greatly simplifies DOM lookups in your event handler. Note that instead of manipulating the HTML attribute disabled you can toggle the disabled property, and this is much terser! Finally, consider attaching an event listener to your checkbox in JS as opposed to writing callbacks in HTML.

 var selects = document.getElementsByClassName('holiday-select'), checkbox = document.getElementById('holiday_check') function closed_holiday() { for (var i = 0; i < selects.length; i++) { selects[i].disabled ^= true // toggle } } if (checkbox.checked) { closed_holiday() } checkbox.addEventListener('change', closed_holiday) 

 <div> <span>Opening Time:</span> <select id="holiday_time_h1" class="holiday-select"><option>00</option></select> : <select id="holiday_time_m1" class="holiday-select"><option>00</option></select> <span>Closing time</span> <select id="holiday_time_h2" class="holiday-select"><option>00</option></select> : <select id="holiday_time_m2" class="holiday-select"><option>00</option></select> <input id="holiday_check" class="check" type="checkbox">Closed</input> </div> 

Answer 4

 function closed_holiday() { if(document.getElementById('holiday_check').checked) { document.querySelectorAll('select').forEach((function(x){ x.setAttribute('disabled', 'disabled');})) } else { document.querySelectorAll('select').forEach((function(x){ x.removeAttribute('disabled');})); } } 

 <div> <span>Opening Time:</span> <select id="holiday_time_h1"><option>00</option></select> : <select id="holiday_time_m1"><option>00</option></select> <span>Closing time</span> <select id="holiday_time_h2"><option>00</option></select> : <select id="holiday_time_m2"><option>00</option></select> <input id="holiday_check" class="check" type="checkbox" onchange="closed_holiday();">Closed </div> 

Answer 5

You can do easily disable and enable by just one line,

 if (document.getElementById('holiday_check').checked) document.getElementById('holiday_time_h1').setAttribute('disabled', 'disabled'); $('#holiday_check').on('change', function() { if (document.getElementById('holiday_check').checked) { document.getElementById('holiday_time_h1').setAttribute('disabled', 'disabled'); $('.Timesheet select').attr('disabled', 'disabled'); //ADDED LINE } else { document.getElementById('holiday_time_h1').removeAttribute('disabled'); $('.Timesheet select').removeAttr('disabled'); //ADDED LINE } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Timesheet"> <span>Opening Time:</span> <select id="holiday_time_h1"> <option>00</option> </select> : <select id="holiday_time_m1"> <option>00</option> </select> <span>Closing time</span> <select id="holiday_time_h2"> <option>00</option> </select> : <select id="holiday_time_m2"> <option>00</option> </select> <input id="holiday_check" class="check" type="checkbox">Closed</input> </div> 

No need of extra code