Disabling multiple input fields and checkbox

Question

I want the nearest input field to be disabled when I click on a checkbox. Because I dont want repetitive code for each id like:

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

I decided to use class and a function. But right now nothing is happening and there are also no errors.

This is my code:

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

kind user · Accepted Answer · 2017-03-14 14:40:30Z

2

Catch all the checkbox elements, bind change event listener to each of them, and if a specific checkbox is checked, disable corresponding text (with the same index) element.

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>

edited Mar 14, 2017 at 14:40

answered Mar 14, 2017 at 14:37

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

George Over a year ago

Wrong way round :) also could remove the if and just do texts[i].disabled = !this.checked

kind user Over a year ago

@George This is a great idea, but without the ! (:

C.Ronaldo Over a year ago

Thanks, I will accept your answer after the lock. I used the !this.checked one otherwise the inputfield will be locked when the box is checked.

Collectives™ on Stack Overflow

Disabling multiple input fields and checkbox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related