选中复选按钮时无法阻止字段

Question

我创建了阻止所有输入的函数（我是用 for of 循环完成的）。现在我想添加条件，如果按钮选中则解锁，如果未选中则阻止。

我写了下面的代码：

<div class="container">

  <input type="number" class="block">
  <input type="text"   class="block">
  <input type="email"  class="block">
  <input type="checkbox" id="scale1" name="scales">
  <label for="scales">Scales</label>

</div>

function blockFileds() {

  let inputsForm = document.getElementsByClassName('block');
  let checker = document.getElementById('scale1');

  for (const singleField of inputsForm) {

    if (checker.checked) {

      singleField.disabled = false;
    } else {
      singleField.disabled = true;
    }
  }
}

blockFileds()

输入被阻止，但我无法解除阻止。

Answer 1

这样...

const 
  inputsForm = document.querySelectorAll('input.block')
, checker    = document.querySelector('#scale1')
  ;

blockFileds()
checker.onclick = blockFileds


function blockFileds()
  {
  inputsForm.forEach( singleField =>
    {
    singleField.disabled = !checker.checked
    })
  }

.block, label {
  display : block;
  margin  : .3em 0;
  }

<div class="container">

  <input type="number" class="block">
  <input type="text"   class="block">
  <input type="email"  class="block">
  <label>
    <input type="checkbox" id="scale1" name="scales">
    Scales
   </label>

</div>

Answer 2

从函数中删除元素，并将 addEventListener 附加到输入

   
        let inputsForm = document.getElementsByClassName('block');
        let checker = document.getElementById('scale1');
        function blockFileds() {
            for (let singleField of inputsForm) {

                if (checker.checked) {
                    singleField.disabled = false;

                } else {
                    singleField.disabled = true;
                    
                }
            }
        }

        blockFileds()
        checker.addEventListener("click", (e)=>{
            blockFileds()
        })

选中复选按钮时无法阻止字段

can't block fields when check button is checked

html

javascript

if-statement

button

check