使用復選框禁用多項選擇

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

有多種方法可以中止此問題。 最常見且可厭的方法是遍歷每個選擇，然后逐個禁用它們。

首先，您需要為要禁用的每個選擇元素獲取一個數組。 您可以給他們附加相同的課程； 讓我們說“假期”，然后使用選擇器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> <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

請注意，這使用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> 

不需要額外的代碼