javascript - 如果选中其他复选框，则禁用复选框

Question

我希望当我单击第一个复选框“没有人”时，其他复选框将被取消选中，并且当其他复选框被选中时，复选框“没有人”这次也将被取消选中，谁能告诉我怎么做？

<p>
    <input id="noone" type="checkbox" />no one</p>
<div id="noneAbove" class="hidden">
    <p>
        <input id="btn1" type="checkbox" /> button 1
    </p>
    <p>
        <input id="btn2" type="checkbox" />button 2</p>
</div>

my code is

$(function(){
  $('#noone').on('click',function(){
   var noone = document.getElementById("noneAboveCheck");
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  if (noone.checked == true){
    btn1.checked = false;
    bnt2.checked = false;
  } else {
     none.checked = false;
  }
  });
});

Answer 1

只需对代码进行一点更改即可运行。

$(function(){
  $('#noone').on('change',function(){
     var btn1 = document.getElementById("btn1");
     var btn2 = document.getElementById("btn2");
     if ($(this).prop('checked') === true){
       $('#btn1').prop('checked', false);
       $('#btn2').prop('checked', false);
     }
  });
  
  $('#btn1, #btn2').on('change',function(){
      var noone = document.getElementById("noneAboveCheck");
      if ($(this).prop('checked') === true){
         $('#noone').prop('checked', false);
      } 
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
    <input id="noone" type="checkbox" />no one</p>
<div id="noneAbove" class="hidden">
    <p>
        <input id="btn1" type="checkbox" /> button 1
    </p>
    <p>
        <input id="btn2" type="checkbox" />button 2</p>
</div>