Mehrere Auswahlmöglichkeiten mit einem Kontrollkästchen deaktivieren

Question

Mein Code ist ein Durcheinander, tut mir leid.

Die JS funktioniert aber nur für die erste wählen; Ich möchte, dass der Benutzer eine Zeit eingibt, aber wenn der Benutzer an diesem Tag nicht arbeitet, möchte ich die vier Auswahlfelder deaktivieren. Leider weiß ich nicht, wo ich die anderen Selects im JS hinzufügen soll.

Es gibt ein anderes Skript, das für die wählt in den Rest der Optionen füllt. Der Code, den ich bisher habe:

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

Beachten Sie, dass diese jQuerys verwendet $.each über den Arrays iterieren.

Auch hier ich bin mit Wildcards alle Elemente auszuwählen, die holiday_check mit id beginnen und dann über sie Looping und sie zu deaktivieren.

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

es mehr Möglichkeiten, um dieses Problem zu beenden. Die gebräuchlichste und abwertbarste Möglichkeit besteht darin, jede Auswahl einzeln zu durchlaufen und sie nacheinander zu deaktivieren.

Zuerst müssen Sie ein Array für jede ausgewählte Element erhalten, die Sie deaktivieren möchten. Sie können ihnen die gleiche Klasse anhängen; Lassen Sie uns "Urlaub" sagen, dann erhalten Sie alle in einem Array mit dem Selektor getElementsByClassName() oder querySelector().

Sobald Sie das getan haben, können Sie eine Schleife durch diese Anordnung von Elementen und Sie sie deaktivieren, wenn der Benutzer über das Kontrollkästchen Element deaktivieren wählen.

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

Da Sie mehr <select> Elemente zu einem Zeitpunkt, zu deaktivieren suchen, einen Klassennamen zu jedem von ihnen die Anwendung vereinfacht die DOM-Lookups in Ihren Event-Handler. Beachten Sie, dass Sie anstelle des HTML-Attributs disabled die disabled-Eigenschaft umschalten können, und das ist viel wichtiger! Ziehen Sie schließlich in Betracht, einen Ereignis-Listener an Ihre Checkbox in JS anzuhängen, anstatt Callbacks in HTML zu schreiben.

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

Sie können nur eine Zeile,

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>

leicht deaktiviere und ermöglichen

Keine Notwendigkeit von zusätzlichem Code