Question

我正在尝试在我的项目中做一些测验。想法是，当单击一个复选框时，应禁用另一个选项。我已经尝试过使用无线电控件，但是它不起作用，因为我有多个问题使用相同的复选框名称。

这是我当前的代码

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

Answer 1

似乎可以使用单选输入（相同的名称不是问题），但是假设您还有其他使用复选框的原因，为什么不在输入元素中添加ID或类以简化操作呢？这是一个使用id并用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>

当另一个同名复选框选中时，javascript禁用复选框

1 个答案: