JS:使用循环单独禁用多个复选框？

Question

我想知道是否可以使用循环作为函数遍历以下JS，而不是为每个复选框ID编写单独的脚本？

我对JS不太在行，虽然我熟悉PHP循环--所以我不是完全盲目的，但显然不是一回事。我也想远离jQuery。

<input type="checkbox" id="cb1">
<input type="text" id="in1" disabled>
<input type="checkbox" id="cb2">
<input type="text" id="in2" disabled>
<input type="checkbox" id="cb3">
<input type="text" id="in3" disabled>
<input type="checkbox" id="cb4">
<input type="text" id="in4" disabled>
<input type="checkbox" id="cb5">
<input type="text" id="in5" disabled>
<input type="checkbox" id="cb6">
<input type="text" id="in6" disabled>

<script>
document.getElementById('cb1').onchange = function() {
    document.getElementById('in1').disabled = !this.checked;
};
document.getElementById('cb2').onchange = function() {
    document.getElementById('in2').disabled = !this.checked;
};
document.getElementById('cb3').onchange = function() {
    document.getElementById('in3').disabled = !this.checked;
};
document.getElementById('cb4').onchange = function() {
    document.getElementById('in4').disabled = !this.checked;
};
document.getElementById('cb5').onchange = function() {
    document.getElementById('in5').disabled = !this.checked;
};
document.getElementById('cb6').onchange = function() {
    document.getElementById('in6').disabled = !this.checked;
};
</script>

以上代码目前的工作方式(只是体积庞大).

这里有一个小提琴：https://jsfiddle.net/6j7dddzv/

我现在的标记实际上是这样的，FYI：

<div class="extra-padding options-parts">
    <h4><b>Replacement Parts</b></h4>
    <div class="row break-on-mobile collapse">
        <div class="col-1-2">
            <div class="row collapse">
                <div class="col-2-3">
                    <input type="checkbox" name="parts_hoses" id="parts-cb1" value="1"><label for="parts-hoses">Vinyl Tubing<b>:</b></label>
                </div>
                <div class="col-1-3"><input name="parts_hoses_n" id="parts-in1" type="number" min="1" max="20" placeholder="1 – 20"></div>
            </div>
        </div>
        <div class="col-1-2">
            <div class="row collapse">
                <div class="col-2-3">
                    <input type="checkbox" name="parts_pumps" id="parts-cb2" value="1"><label for="parts-pumps">Pumps<b>:</b></label>
                </div>
                <div class="col-1-3"><input name="parts_pumps_n" id="parts-in2" type="number" min="1" max="20" placeholder="1 – 20"></div>
            </div>
        </div>
    </div>
    <div class="row break-on-mobile collapse">
        <div class="col-1-2">
            <div class="row collapse">
                <div class="col-2-3">
                    <input type="checkbox" name="parts_lights" id="parts-cb3" value="1"><label for="parts-lights">Light Bulbs<b>:</b></label>
                </div>
                <div class="col-1-3"><input name="parts_lights_n" id="parts-in3" type="number" min="1" max="20" placeholder="1 – 20"></div>
            </div>
        </div>
        <div class="col-1-2">
            <div class="row collapse">
                <div class="col-2-3">
                    <input type="checkbox" name="parts_trans" id="parts-cb4" value="1"><label for="parts-trans">Transformers<b>:</b></label>
                </div>
                <div class="col-1-3"><input name="parts_trans_n" id="parts-in4" type="number" min="1" max="20" placeholder="1 – 20"></div>
            </div>
        </div>
    </div>
    <div class="row break-on-mobile collapse">
        <div class="col-1-2">
            <div class="row collapse">
                <div class="col-2-3">
                    <input type="checkbox" name="parts_river" id="parts-cb5" value="1"><label for="parts-river">River Rocks<b>:</b></label>
                </div>
                <div class="col-1-3"><input name="parts_river_n" id="parts-in5" type="number" min="1" max="20" placeholder="1 – 20"></div>
            </div>
        </div>
        <div class="col-1-2">
            <div class="row collapse">
                <div class="col-2-3">
                    <input type="checkbox" name="parts_screen" id="parts-cb6" value="1"><label for="parts-screen">Mesh Divider<b>:</b></label>
                </div>
                <div class="col-1-3"><input name="parts_screen_n" id="parts-in6" type="number" min="1" max="20" placeholder="1 – 20"></div>
            </div>
        </div>
    </div>
</div>

篡改当前标记：https://jsfiddle.net/mogjLxfd/1/

Answer 1

从您的第二个jsFiddle中，我们可以导出以下内容，以启用/禁用这些框：

var boxes = document.querySelectorAll("input[type='checkbox']");
function getOnChange(i) {
  return function(){
    var inp = document.getElementById(boxes[i].id.replace(/cb/, 'in'));
    if(this.checked) {
      inp.disabled = false;
      inp.readOnly = false;
    } else {
      inp.disabled = true;
      inp.readOnly = true;
    }
  };
};
for(var i = 0; i < boxes.length - 1; i++) {
  boxes[i].onchange = getOnChange(i);
}

有关工作示例，请参见https://jsfiddle.net/w4ve2yzq ..。

Answer 2

使用querySelectorAll获取所有checkbox元素，并使用nextElementSibling获取当前元素的下一个元素。

ATTRIBUTE^=VALUE可用于查找具有以指定值开头的属性的元素。

​

var elems = document.querySelectorAll('[type="checkbox"][id^="cb"]');
[].forEach.call(elems, function(elem) {
  elem.addEventListener('change', function() {
    this.nextElementSibling.disabled = !this.checked
  })
});

<input type="checkbox" id="cb1">
<input type="text" id="in1" disabled>
<input type="checkbox" id="cb2">
<input type="text" id="in2" disabled>
<input type="checkbox" id="cb3">
<input type="text" id="in3" disabled>
<input type="checkbox" id="cb4">
<input type="text" id="in4" disabled>
<input type="checkbox" id="cb5">
<input type="text" id="in5" disabled>
<input type="checkbox" id="cb6">
<input type="text" id="in6" disabled>

​

小提琴在这里

编辑：

​

var elems = document.querySelectorAll('[type="checkbox"][id^="parts-cb"]');
[].forEach.call(elems, function(elem) {
  elem.addEventListener('change', function() {
    this.parentElement.nextElementSibling.querySelector('input').disabled = !this.checked;
  })
});

<div class="extra-padding options-parts">
  <h4><b>Replacement Parts</b></h4>
  <div class="row break-on-mobile collapse">
    <div class="col-1-2">
      <div class="row collapse">
        <div class="col-2-3">
          <input type="checkbox" name="parts_hoses" id="parts-cb1" value="1">
          <label for="parts-hoses">Vinyl Tubing<b>:</b>
          </label>
        </div>
        <div class="col-1-3">
          <input name="parts_hoses_n" id="parts-in1" type="number" min="1" max="20" placeholder="1 – 20" disabled>
        </div>
      </div>
    </div>
    <div class="col-1-2">
      <div class="row collapse">
        <div class="col-2-3">
          <input type="checkbox" name="parts_pumps" id="parts-cb2" value="1">
          <label for="parts-pumps">Pumps<b>:</b>
          </label>
        </div>
        <div class="col-1-3">
          <input name="parts_pumps_n" id="parts-in2" type="number" min="1" max="20" placeholder="1 – 20" disabled>
        </div>
      </div>
    </div>
  </div>
  <div class="row break-on-mobile collapse">
    <div class="col-1-2">
      <div class="row collapse">
        <div class="col-2-3">
          <input type="checkbox" name="parts_lights" id="parts-cb3" value="1">
          <label for="parts-lights">Light Bulbs<b>:</b>
          </label>
        </div>
        <div class="col-1-3">
          <input name="parts_lights_n" id="parts-in3" type="number" min="1" max="20" placeholder="1 – 20" disabled>
        </div>
      </div>
    </div>
    <div class="col-1-2">
      <div class="row collapse">
        <div class="col-2-3">
          <input type="checkbox" name="parts_trans" id="parts-cb4" value="1">
          <label for="parts-trans">Transformers<b>:</b>
          </label>
        </div>
        <div class="col-1-3">
          <input name="parts_trans_n" id="parts-in4" type="number" min="1" max="20" placeholder="1 – 20" disabled>
        </div>
      </div>
    </div>
  </div>
  <div class="row break-on-mobile collapse">
    <div class="col-1-2">
      <div class="row collapse">
        <div class="col-2-3">
          <input type="checkbox" name="parts_river" id="parts-cb5" value="1">
          <label for="parts-river">River Rocks<b>:</b>
          </label>
        </div>
        <div class="col-1-3">
          <input name="parts_river_n" id="parts-in5" type="number" min="1" max="20" placeholder="1 – 20" disabled>
        </div>
      </div>
    </div>
    <div class="col-1-2">
      <div class="row collapse">
        <div class="col-2-3">
          <input type="checkbox" name="parts_screen" id="parts-cb6" value="1">
          <label for="parts-screen">Mesh Divider<b>:</b>
          </label>
        </div>
        <div class="col-1-3">
          <input name="parts_screen_n" id="parts-in6" type="number" min="1" max="20" placeholder="1 – 20" disabled>
        </div>
      </div>
    </div>
  </div>
</div>

​

更新Fiddle

Answer 3

HTML中的类可以也是非常常用的，用于获取Javascript中的组元素，而不仅仅是CSS。

因此，将相同的类分配给所有要指定目标的复选框，然后使用document.querySelectorAll获取它们，这将为您提供可以迭代的数组中的DOM元素。

然后可以使用nextElementSibling来针对每个复选框的下一个直接DOM元素。

​

var checkboxes = document.querySelectorAll(".top-checkbox");

for(var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    if(this.checked) {
      this.nextElementSibling.disabled = false;
    } else {
      this.nextElementSibling.disabled = true;      
    }
  }
}

<input class="top-checkbox" type="checkbox">
<input type="text" disabled>
<input class="top-checkbox" type="checkbox">
<input type="text" disabled>
<input class="top-checkbox" type="checkbox">
<input type="text" disabled>
<input class="top-checkbox" type="checkbox">
<input type="text" disabled>
<input class="top-checkbox" type="checkbox">
<input type="text" disabled>
<input class="top-checkbox" type="checkbox">
<input type="text" disabled>

​

注意，nextElementSibling不支持< IE9。这也要求您的<input>始终是复选框之后的直接节点。