Question

我的代码很乱，抱歉。

JS可以工作但只适用于第一个选择;我希望用户输入时间，但如果用户当天不工作，我想禁用四个选择框。不幸的是，我不知道在JS中添加其他选择的位置。

还有另一个脚本填写了选择的其余选项。我到目前为止的代码：

＆＃13;

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');
}

＆＃13;

<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>

＆＃13;

Answer 1

有多种方法可以解决此问题。最常见和最不可靠的方法是遍历每个选择并逐个禁用它们。

首先，您需要为要禁用的每个select元素获取一个数组。你可以把同一个班级附在他们身上;让我们说＆＃34;假日＆＃34;然后使用选择器getElementsByClassName()或querySelector()将所有这些内容放入数组中。

完成后，您循环遍历此元素数组，并在用户选择通过复选框元素禁用时禁用它们。

＆＃13;

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');
    }
  }  
}

＆＃13;

<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>

＆＃13;

Answer 2

请注意，这使用jquery的$.each来迭代数组。

此外，我在这里使用通配符来选择以id holiday_check开头的所有元素，然后循环遍历它们并禁用它们。

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

由于您希望一次禁用多个<select>元素，因此对每个元素应用类名会极大地简化事件处理程序中的DOM查找。请注意，您可以切换disabled属性，而不是操纵HTML属性disabled，这是非常简单的！最后，考虑将事件监听器附加到JS中的复选框，而不是在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

您只需一行即可轻松禁用和启用

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>

无需额外代码

使用复选框禁用多个选择

5 个答案: