CODEWITHSUNDEEP
javascriptcheckbox
George Barda
George Barda

Reputation: 55

Checkbox disabling an input

I want to make it so when the user clicks the checkbox , the player Two input goes disabled. My problem is that the input remains disabled in both cases, doesn't matter if checkbox is checked or not.

const Initialization = (function() {
  p1 = '';
  p2 = '';

  const playerOne = document.querySelector('#player1')
  const playerTwo = document.querySelector('#player2')
  const checkAI = document.querySelector('#computer')
  const startButton = document.querySelector('#start')

  startButton.addEventListener('click', () => {
    p1 = Player(playerOne.value)
    p2 = Player(playerTwo.value)
  })

  if (checkAI.checked = true) {
    playerTwo.disabled = true;
  } else {
    playerTwo.disabled = false;
  }

  return {
    p1,
    p2,

  }
})();
<label>Computer: <input type="checkbox" id="computer"></label><br/>
<input type="text" id="player1"><br/>
<input type="text" id="player2"><br/>
<input type="button" id="start" value="Start" />

Upvotes: 0

Views: 58

Answers (4)

felgro
felgro

Reputation: 71

You can accomplish this reactiveness by listening for the change event on the checkbox element and updating the input state accordingly:

const Initialization = (function() {
  p1 = '';
  p2 = '';

  const playerOne = document.querySelector('#player1')
  const playerTwo = document.querySelector('#player2')
  const checkAI = document.querySelector('#computer')
  const startButton = document.querySelector('#start')

  startButton.addEventListener('click', () => {
    p1 = Player(playerOne.value)
    p2 = Player(playerTwo.value)
  })

  // listen for change event on checkbox
  checkAI.addEventListener('change', () => {
    // set playerTwo input to current checkbox state
    playerTwo.disabled = checkAI.checked
  })

  return {
    p1,
    p2,
  }
})();
<label>Computer: <input type="checkbox" id="computer"></label><br/>
<input type="text" id="player1"><br/>
<input type="text" id="player2"><br/>
<input type="button" id="start" value="Start" />

Upvotes: 0

JeanJean
JeanJean

Reputation: 11

If you want to react on checkbox change you need to add event listener on this input. For example onclick or onchange. Take care to use comparaison operator in your if test checkAI.checked === true. You can find a JSFiddle Event on checkbox input

Upvotes: 1

George Barda
George Barda

Reputation: 55

worked by adding an eventListener to the checkbox.


    checkAI.addEventListener('click',()=>{
        if(checkAI.checked){
          playerTwo.disabled = true;
        }else{
          playerTwo.disabled = false;
        }
      })

Upvotes: 1

mplungjan
mplungjan

Reputation: 178385

You need an event handler and to test equality using == or ===

Here is a simpler version

const Initialization = function() {
  const Player = str => console.log(str);
  const playerOne = document.querySelector('#player1')
  const playerTwo = document.querySelector('#player2')
  const checkAI = document.querySelector('#computer')
  const startButton = document.querySelector('#start')


  let p1 = '';
  let p2 = '';
  startButton.addEventListener('click', () => {
    p1 = Player(playerOne.value)
    p2 = Player(playerTwo.value || "computer")
  });
  checkAI.addEventListener('click', (e) => {
    const chk = e.target.checked;
    playerTwo.disabled = chk;
    if (chk) playerTwo.value="";
  })  
};
Initialization()
<label>Computer: <input type="checkbox" id="computer"></label><br/>
<input type="text" id="player1"><br/>
<input type="text" id="player2"><br/>
<input type="button" id="start" value="Start" />

Upvotes: 0

Related Questions