如果選中其他復選框，則禁用復選框

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>

我的代碼是

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

嘗試這個。 我只使用 javascript。

1. JavaScript 解決方案

    <p>
        <input id="noneAboveCheck" type="checkbox" onchange="toggleCheckbox(this)" />no one</p>
    <div id="noneAbove" class="hidden">
        <p>
            <input id="incarcerated" type="checkbox" onchange="toggleCheckbox(this)"/> button 1
        </p>
        <p>
            <input id="support" type="checkbox" onchange="toggleCheckbox(this)"/>button 2</p>
    </div>

Javascript代碼

function toggleCheckbox(element)
     {

      if(element.id=='noneAboveCheck')
     {

     document.getElementById("incarcerated").checked = false;
     document.getElementById("support").checked = false;

     }else
     {
     document.getElementById("noneAboveCheck").checked = false;
     }

     }

2.jquery解決方案

html

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

查詢代碼

$(function(){
  $('input[type=checkbox]').change(function(event) {
  alert(event.target.id);

  if(event.target.id=='noone')
  {
  alert(1);
  $("#btn1").prop("checked", false);
  $("#bnt2").prop("checked", false);

  }else
  {
  alert(2);
  $("#noone").prop("checked", false);
  }

  });
});

Answer 2

試圖在評論中解釋。 希望能幫助到你

//get the click event on any checkbox 
$(document).on('click','input:checkbox',function(event) {
// only if input is checked
if(this.checked) {
             //then first select all checkboxes and uncheck them
        $("input:checkbox").each(function(i,ele){
          $(this).prop("checked",false);
        })
      //now check only one you clicked  
          $(this).prop("checked",true);
    }

})

在這里玩耍示例

Answer 3

只需對您的代碼稍作更改，現在就可以使用了。

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

Answer 4

所以添加更改處理程序並檢查它是否沒有人。 如果是，請取消選中其他人。 如果不是noone，則取消選中noone。

 const cbs = $('input[type="checkbox"]') cbs.on("change", function () { if (this.checked) { if (this.id==='noone') { cbs.not(this).prop("checked", false) } else { $("#noone").prop("checked", false) } } })

 label { display: block }

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

Answer 5

我認為這會更簡單地回答你的問題。

$("input:checkbox:not(:checked)").on('change', function(){
   if(this.checked){
    var id = $(this).attr("id");
    if(id == "noone"){
      $("input:checkbox").each(function(i){ 
       if($(this).attr("id")!=id)$(this).prop("checked", false);;
      })
    }else{
      $("#noone").prop("checked", false);
    }
  }
})