Javascript отключить флажок, когда другой флажок отмечен с тем же именем - PullRequest
Новая
       11

Javascript отключить флажок, когда другой флажок отмечен с тем же именем

0 голосов
/ 28 августа 2018

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

Вот мой текущий код 

<form name=f1 method=post action="">
    <label>soal 1</label><br>
<input type=checkbox name=domi[] onclick="domi1(this.checked)" >A<br>
<input type=checkbox name=influ[] onclick="influ1(this.checked)">B<br><br>

    <label>soal 2</label><br>
<input type=checkbox name=domi[] onclick="influ2(this.checked)" >A<br>
<input type=checkbox name=influ[] onclick="stedi1(this.checked)">B<br><br>

<button type="submit">simpan</button>
</form>

Javascript код отключил элементы управления 

 <SCRIPT LANGUAGE="JavaScript">
    function domi1(status)
    {
    status=!status; 
    document.f1.influ1.disabled = status;
    }

    function influ1(status)
    {
    status=!status; 
    document.f1.domi1.disabled = status;
    }
    </script>

1 Ответ

0 голосов
/ 28 августа 2018

Похоже, вы могли бы использовать радиовходы (одно и то же имя не проблема), но при условии, что у вас есть другая причина использовать флажки, почему бы не добавить идентификаторы или классы к вашим элементам ввода, чтобы немного упростить вещи? Вот базовый пример использования идентификаторов и замены вызовов встроенных функций на addEventListener: 

const inputs = document.querySelectorAll('input[type="checkbox"]');

for (let input of inputs) {
  input.addEventListener('click', (event) => {
    if (event.target.id === 'domi1') {
      document.querySelector('#influ1').disabled = true;
    } else if (event.target.id === 'influ1') {
      document.querySelector('#domi1').disabled = true;
    }
  });
}
<span>soal 1</span>
<br>
<input type="checkbox" name="domi[]" id="domi1">
<label for="domi1">A</label>
<br>
<input type="checkbox" name="influ[]" id="influ1">
<label for="influ1">B</label>

Также версия, использующая радиовходы вместо: 

const inputs = document.querySelectorAll('input[type="radio"]');

for (let input of inputs) {
  input.addEventListener('click', (event) => {
    if (event.target.id === 'domi1') {
      document.querySelector('#influ1').disabled = true;
    } else if (event.target.id === 'influ1') {
      document.querySelector('#domi1').disabled = true;
    }
  });
}
<span>soal 1</span>
<br>
<input type="radio" name="domi[]" id="domi1">
<label for="domi1">A</label>
<br>
<input type="radio" name="influ[]" id="influ1">
<label for="influ1">B</label>
...