禁用多选与复选框

Question

我的代码是一团糟，很抱歉。

该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> 
 
\t <span>Opening Time:</span> 
 
\t <select id="holiday_time_h1"><option>00</option></select> 
 
\t : 
 
\t <select id="holiday_time_m1"><option>00</option></select> 
 
\t \t 
 
\t <span>Closing time</span> 
 
\t <select id="holiday_time_h2"><option>00</option></select> 
 
\t : 
 
\t <select id="holiday_time_m2"><option>00</option></select> 
 
\t \t 
 
    <input id="holiday_check" class="check" type="checkbox" onchange="closed_holiday();">Closed</input> 
 
\t \t \t \t \t 
 
</div>

Answer 1

注意，这里使用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 2

有多种方式来终止这个问题。 最常见和可行的方法是循环遍历每个选择并逐一禁用它们。

首先，您需要为每个要禁用的select元素获取一个数组。你可以给他们附上同一个班级;让我们说“假期”，然后使用选择器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'); 
 
    } 
 
    } 
 
}

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

不需要额外的代码