Блог

Главная - Вопросы по программированию - Флажок, отключающий ввод

Флажок, отключающий ввод

#javascript #checkbox

#javascript #флажок

Вопрос:

Я хочу сделать так, чтобы, когда пользователь нажимал на флажок, ввод двух игроков отключался. Моя проблема в том, что ввод остается отключенным в обоих случаях, не имеет значения, установлен флажок или нет.

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

Комментарии:

1. Пожалуйста HTML , тоже опубликуйте и отредактируйте весь вопрос с помощью фрагмента (используйте инструмент [<>] )

2. Вам нужно добавить прослушиватель к флажку, чтобы обновить отключенное состояние при change

3. checkAI.checked = true является ли назначение, использование checkAI.checked === true или просто checkAI.checked

Ответ №1:

работал путем добавления EventListener к флажку.

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

Ответ №2:

Если вы хотите реагировать на изменение флажка, вам необходимо добавить прослушиватель событий для этого ввода. Например onclick , или onchange . Позаботьтесь о том, чтобы использовать оператор сравнения в вашем if тесте checkAI.checked === true . Вы можете найти событие JSFiddle при вводе флажка

Ответ №3:

Вам нужен обработчик событий и для проверки равенства с помощью == или ===

Вот более простая версия

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

Ответ №4:

Вы можете добиться этой реактивности, прослушивая событие изменения в элементе checkbox и соответствующим образом обновляя состояние ввода:

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

Метки: ,