javascript - 如何使复选框单独与输入字段一起使用

Question

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

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

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;
            }
        });
    })
});

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