Question

我希望在单击复选框时禁用最近的输入字段。因为我不希望每个id的重复代码如下：

document.getElementById('checkBox').onchange = function() {
    document.getElementById('textBox').disabled = !this.checked;
};

我决定使用类和函数。但是现在什么也没发生，也没有错误。

这是我的代码：

<form action="" method="get">
    <input type="checkbox" class="checkBox" name="player1" value="check" checked> <input type="text" class="textBox" name="player1Name" value="Player1"><br /><br />
    <input type="checkbox" class="checkBox" name="player2" value="check" checked> <input type="text" class="textBox" name="player2Name" value="Player2"><br><br />
    <input type="checkbox" class="checkBox" name="player3" value="check"> <input type="text" class="textBox" name="player3Name" value="Player3" disabled><br /><br />
    <input type="checkbox" class="checkBox" name="player4" value="check"> <input type="text" class="textBox" name="player4name" value="Player4" disabled><br /><br />
    <input type="submit" value="Play game!">
  </form>

<script>
    function getClosest(el, tag) {
      // this is necessary since nodeName is always in upper case
      tag = tag.toUpperCase();
      do {
        if (el.nodeName === tag) {
          // tag name is found! let's return it. :)
          return el;
        }
      } while (el = el.parentNode);

      // not found :(
      return null;
    }

    document.getElementsByClassName('checkBox').onchange = function() {
        var closestInput = getClosest(this, input);

        closestInput.disabled = !this.checked;
    };
</script>

的jsfiddle： https://jsfiddle.net/8an1h0ys/

Answer 1

捕获所有checkbox元素，将change事件侦听器绑定到每个元素，如果选中了特定复选框，则禁用相应的文本（具有相同的index）元素。< / p>

var checks = document.getElementsByClassName('checkBox');
var texts = document.getElementsByClassName('textBox');
Array.from(checks).forEach((v,i) => v.addEventListener('change', function(){
  texts[i].disabled = this.checked;
}));

<form action="" method="get">
    <input type="checkbox" class="checkBox" name="player1" value="check" > <input type="text" class="textBox" name="player1Name" value="Player1"><br /><br />
    <input type="checkbox" class="checkBox" name="player2" value="check" > <input type="text" class="textBox" name="player2Name" value="Player2"><br><br />
    <input type="checkbox" class="checkBox" name="player3" value="check"> <input type="text" class="textBox" name="player3Name" value="Player3" ><br /><br />
    <input type="checkbox" class="checkBox" name="player4" value="check"> <input type="text" class="textBox" name="player4name" value="Player4" ><br /><br />
    <input type="submit" value="Play game!">
  </form>

禁用多个输入字段和复选框

1 个答案: