Question

如何通过选择复选框启用输入字段？

此代码启用所有输入字段，但如何通过选中相应的复选框来逐个启用

1 2 3 4

var getInput = document.getElementsByClassName("test"),
    changeState = document.getElementsByClassName("check");


Array.from(changeState).forEach(function(checkBox){
    checkBox.addEventListener('change', function(){
        Array.from(getInput).forEach(function(inputText){
            if(inputText.disabled == true){
                inputText.disabled = false;
            }else{
                inputText.disabled = true;
            }
        });
    })
});

Answer 1

您可以按照以下代码进行操作。

var getInput = document.getElementsByClassName("test"),
    changeState = document.getElementsByClassName("check");


Array.from(changeState).forEach(function(checkBox){
  checkBox.addEventListener('change', function(event){
    var inputText = event.target.parentElement.firstElementChild;
    if (inputText.disabled == true) {
        inputText.disabled = false;
    } else {
        inputText.disabled = true;
    }
  })
});

<form id="contact">
  <p>
    <input type="text" class="test" disabled>
    <input type="checkbox" class="check">
  </p>
  <p>
    <input type="text" class="test" disabled>
    <input type="checkbox" class="check">
  </p>
  <p>
    <input type="text" class="test" disabled>
    <input type="checkbox" class="check">
  </p>
</form>

Answer 2

如果为更改事件回调函数提供参数 e ，则可以使用 e.target 找出导致事件的元素。

如果我们查看html元素的层次结构，我们可以看到输入文本字段是复选框前面的html元素。因此，要到达此位置，我们必须使用 e.target.parentNode 进入段落元素。现在，我们可以使用 e.target.parentNode.children 来获取该段子元素的html集合，但是由于我们知道这是第一个，因此我们可以简单地使用 e.target.parentNode.children [0] 进入输入元素。

var getInput = document.getElementsByClassName("test"),
  changeState = document.getElementsByClassName("check");


Array.from(changeState).forEach(function(checkBox) {
  checkBox.addEventListener('change', function(e) {
    var input = e.target.parentNode.children[0];
    if (input.disabled == true) {
      input.disabled = false;
    } else {
      input.disabled = true;
    }

  })
});

<form id="contact">
  <p>
    <input type="text" class="test" disabled>
    <input type="checkbox" class="check">
  </p>
  <p>
    <input type="text" class="test" disabled>
    <input type="checkbox" class="check">
  </p>
  <p>
    <input type="text" class="test" disabled>
    <input type="checkbox" class="check">
  </p>
</form>

Answer 3

尝试

checkBox.addEventListener('change', function(e){
    e.target.parentNode.children[0].disabled= !e.target.checked;    
})

var getInput = document.getElementsByClassName("test"),
    changeState = document.getElementsByClassName("check");


Array.from(changeState).forEach(function(checkBox){
    checkBox.addEventListener('change', function(e){
        e.target.parentNode.children[0].disabled= !e.target.checked;     
    })
});

<form id="contact">
        <p>
            <input type="text" class="test" disabled>
            <input type="checkbox" class="check">
        </p>
        <p>
            <input type="text" class="test" disabled>
            <input type="checkbox" class="check">
        </p>
        <p>
            <input type="text" class="test" disabled>
            <input type="checkbox" class="check">
        </p>
</form>

Answer 4

条件if (inputText.disabled == true)似乎不太正确，因为可能导致不可预测的行为。

相反，它应该检查是否已选中复选框。

还应该选择父节点的子元素input。因此.parentElement.querySelector('input')将选择输入元素，而不管其位置。

假设复选框是否位于输入字段之前，那么.parentElement.children[0]将选择错误的元素。

var changeState = document.getElementsByClassName("check");

[...changeState].forEach(function(checkBox){
    checkBox.addEventListener('change', function(){
        let inp = this.parentElement.querySelector('input');
        inp.disabled = !this.checked;
    })
});

<form id="contact">
        <p>
            <input type="text" class="test" disabled>
            <input type="checkbox" class="check">
        </p>
        <p>
            <input type="text" class="test" disabled>
            <input type="checkbox" class="check">
        </p>
        <p>
            <input type="text" class="test" disabled>
            <input type="checkbox" class="check">
        </p>
</form>

如何使复选框分别与输入字段配合使用

4 个答案: