javascript - JS : Use loop to individually disable multiple checkbox's?

Question

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

我不太擅长 JS，但我熟悉 PHP foreach 循环 - 所以我不是完全盲目，但显然不是一回事。我也想远离 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>

上面的代码目前按原样工作(只是体积庞大)...

这是一个 fiddle :https://jsfiddle.net/6j7dddzv/

<小时/>

我当前的标记实际上是这样的，仅供引用:

<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

使用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>

Fiddle here

编辑:

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>

Updated Fiddle