JS：如果select是默认值，禁用复选框？

Question

我有一组来自

的复选框

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

通过id="parts-cb6"

我有一个#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>

当它处于默认值“wall-mounted”时，复选框被启用（默认情况下是这样），但当我将其切换到列表中的另一个选项时......我想要禁用复选框。

到目前为止，这是我的JS（不起作用）：

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

我做错了什么？任何帮助表示赞赏！

这是一个小提琴：https://jsfiddle.net/cwkgsuq1/

Answer 1

您缺少循环SDK 23数组集合。

普通JS不是jQuery，因此“checkboxes”无效。
的不是：

checkBoxes.disabled = false;

因此简化的代码可能如下所示：

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

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();