CODEWITHSUNDEEP
javascript
Marcel Anke
Marcel Anke

Reputation: 57

Disable multiple selects with a checkbox

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>

Upvotes: 1

Views: 1048

Answers (5)

gyre
gyre

Reputation: 16777

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>

Upvotes: 0

Dhara
Dhara

Reputation: 1972

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

Upvotes: 0

Nooh
Nooh

Reputation: 1546

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>

Upvotes: 0

willia_am
willia_am

Reputation: 188

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>

Upvotes: 2

philantrovert
philantrovert

Reputation: 10092

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>

Upvotes: 0

Related Questions