禁用多選與複選框

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>

不需要額外的代碼