JS: Kontrollkästchen deaktivieren, wenn Auswahl der Standardwert ist?

Question

Ich habe eine Reihe von Kontrollkästchen von

<input type="checkbox" name="parts_hoses" id="parts-cb1" value="1"> 

durch id="parts-cb6"

Ich habe eine Auswahlbox von #send-product

      <select name="send_product" id="send-product"> 
           <option value="wall-mounted" selected>Wall-mounted (Default)</option> 
           <option value="freestanding">Freestanding</option> 
           <option value="third_party">Third Party</option> 
          </select> 

, dass, wenn es auf seinem Standardwert ist, "wall-mounted" , die Kontrollkästchen sind aktiviert (wie sie standardmäßig sind), aber wenn ich das zu einer anderen Option in der Liste umschalte ... Ich möchte die Kontrollkästchen deaktivieren.

Hier ist meine JS bisher (nicht funktioniert):

function switchProduct() { 
    var checkBoxes = document.querySelectorAll('input[type="checkbox"][id^="parts-cb"]'); 
    var selectBox = document.getElementById('send-product'); 
    if (selectBox.value == 'wall-mounted') { 
     checkBoxes.disabled = false; 
    } else { 
     checkBoxes.disabled = true; 
    } 
    } 
    document.getElementById('send-product').addEventListener('change', switchProduct); 

Was mache ich falsch? Jede Hilfe wird geschätzt!

Hier ist eine Geige: https://jsfiddle.net/cwkgsuq1/

Answer 1

Sie verpassen zu Schleife Ihre checkboxes Array Sammlung.

plain JS ist nicht jQuery, daher "checkBoxes.disabled = false;" wird nicht funktionieren.
Statt:

for(var i=0; i<checkBoxes.length; i++) { 
    checkBoxes[i].disabled = false; 
} 

So vereinfacht Ihr Code aussehen könnte:

function switchProduct() { 
 
    var checkBoxes = document.querySelectorAll('input[type="checkbox"][id^="parts-cb"]'); 
 
    var selectBox = document.getElementById('send-product'); 
 
    for(var i=0; i<checkBoxes.length; i++) { 
 
    checkBoxes[i].disabled = selectBox.value == 'wall-mounted'; 
 
    } 
 
} 
 
document.getElementById('send-product').addEventListener('change', switchProduct); 
 
switchProduct();

<select name="send_product" id="send-product"> 
 
    <option value="wall-mounted" selected>Wall-mounted (Default)</option> 
 
    <option value="freestanding">Freestanding</option> 
 
    <option value="third_party">Third Party</option> 
 
</select><br><br> 
 

 
<input type="checkbox" id="parts-cb1" value="1"> 
 
<br> 
 
<input type="checkbox" id="parts-cb2" value="1"> 
 
<br> 
 
<input type="checkbox" id="parts-cb3" value="1">