主页 / 问题 / 1001876
Accepted
StackOverflow
Asked:2020-07-11 23:56:06 +0000 UTC2020-07-11 23:56:06 +0000 UTC

简化 JavaScript 代码

  • 772

刚开始学JS，有问题，有工作代码，但是很繁琐，很大，帮助简化或减少。

<script>
    document.getElementById('check-1').onchange = function() {
        document.getElementById('item-1').disabled = !this.checked;
    };
    document.getElementById('check-2').onchange = function() {
        document.getElementById('item-2').disabled = !this.checked;
    };
    document.getElementById('check-3').onchange = function() {
        document.getElementById('item-3').disabled = !this.checked;
    };
    document.getElementById('check-4').onchange = function() {
        document.getElementById('item-4').disabled = !this.checked;
    };
</script>
javascript

1 个回答

  1. Best Answer

    document.querySelector('main').addEventListener('change', function (e) {
  var row = e.target.parentElement

  if (row && row.classList.contains('chk-with-input')) {
    row.querySelector('.chk-dest').disabled = !e.target.checked
  }
})
    <main>
  <div class=chk-with-input>
    <input type=checkbox checked>
    <input type=text class=chk-dest>
  </div>
  <div class=chk-with-input>
    <input type=checkbox checked>
    <input type=text class=chk-dest>
  </div>
  <div class=chk-with-input>
    <input type=checkbox checked>
    <input type=text class=chk-dest>
  </div>
  <div class=chk-with-input>
    <input type=checkbox checked>
    <input type=text class=chk-dest>
  </div>
  <div class=chk-with-input>
    <input type=checkbox checked>
    <input type=text class=chk-dest>
  </div>
</main>

    • 5

相关问题