我的代码很乱,抱歉。
JS可以工作但只适用于第一个选择;我希望用户输入时间,但如果用户当天不工作,我想禁用四个选择框。不幸的是,我不知道在JS中添加其他选择的位置。
还有另一个脚本填写了选择的其余选项。 我到目前为止的代码:
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>
&#13;
答案 0 :(得分:2)
有多种方法可以解决此问题。 最常见和最不可靠的方法是遍历每个选择并逐个禁用它们。
首先,您需要为要禁用的每个select元素获取一个数组。你可以把同一个班级附在他们身上;让我们说&#34;假日&#34;然后使用选择器getElementsByClassName()或querySelector()将所有这些内容放入数组中。
完成后,您循环遍历此元素数组,并在用户选择通过复选框元素禁用时禁用它们。
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;
答案 1 :(得分:0)
请注意,这使用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>
答案 2 :(得分:0)
由于您希望一次禁用多个<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>
答案 3 :(得分:0)
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>
答案 4 :(得分:0)
您只需一行即可轻松禁用和启用
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>
无需额外代码