JQuery - 允许选择特定的2个复选框

Question

我只想要选中一个复选框 - 除了它的复选框3和4 - 然后我想允许选中这两个复选框。这是我唯一允许2个复选框的时间。

我有一个只允许1个复选框的工作示例。看到j​​sfiddle ... https://jsfiddle.net/rbla/s1setkfe/3/

我需要选择＃3和＃4

$(function() {

  $('#submit').click(function() {
    checked = $("input[type=checkbox]:checked").length;

    if (!checked) {
      alert("You must check at least one reason.");
      return false;
    }
  });
});


// No more than 1 checkbox allowed
var limit = 1;
$('input.sing-chbx').on('change', function(evt) {

  if ($("input[name='choice[]']:checked").length > limit) {
    this.checked = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" name="formname" method="post" autocomplete="off" id="update">
  <div class="group" style="margin:0.5em 0;">
    <div>
      <div id="one">
        <input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01">
        <label>One</label><br/>
      </div>
      <div id="two">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="02">
        <label>Two</label><br/>
      </div>
      <div id="three">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="03">
        <label>Three</label><br/>
      </div>
      <div id="four">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="04">
        <label>Four</label><br/>
      </div>
      <div id="five">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="05">
        <label>Five</label><br/>
      </div>
    </div>
  </div>
  <input type="submit" id="submit" value="Confirm Submission">
</form>

Answer 1

我已经创建了一个fiddle来展示我的解决方案。

通过实际禁用其他复选框，我改变了处理此问题的方式，使用户更加直观地了解所发生的情况。

我为所有复选框添加了新类，只允许一个选择，并在允许两个选择的复选框中添加了一个单独的类。

之后，您只需要检查所单击的复选框的类，并根据它是否为select-one或select-two复选框禁用其他复选框：

var canOnlySelectOne = $(this).hasClass("select-one");

if (canOnlySelectOne) {
    $(".sing-chbx").not(this).attr("disabled", this.checked);
} else if ($(this).hasClass("select-two")) {
    if ($(".select-two:checked").length > 0) {
       $(".select-one").attr("disabled", true);
} else {
 $(".select-one").attr("disabled", this.checked);
}
}

我们只是根据是否选中点击的（this）来启用/禁用其他复选框。如果复选框有一个select-two类，那么我们检查是否检查了任何select-two复选框，并相应地采取行动。

Answer 2

1. 而不是阻止用户检查 - 只需取消选中上一个选择
2. 你有3个案例：点击03，点击04，点击其他东西

这是更新的代码：

$(function() {

  $('#submit').click(function() {
    checked = $("input[type=checkbox]:checked").length;

    if (!checked) {
      alert("You must check at least one reason.");
      return false;
    }
  });
});


// No more than 1 checkbox allowed except 3 & 4
$('input.sing-chbx').on('change', function(evt) {
   var me = $(this).val(); 
 $('input.sing-chbx').each(function(ix){
   var el = $(this);
   if(el.val()!= me) {
      if(me == "03") {
   		   // case 1: me == '03' - disable all but '04'
         if( el.val() != "04") {
	            el.prop('checked', false);
         }
      } else if(me == "04") { 
      	// case 2: me == '04' - disable all but '03'
        if(el.val() != "03") {
        	el.prop('checked', false);
        }
      } else {
      	// otherwise disable all
        el.prop('checked', false);
      }
   }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" name="formname" method="post" autocomplete="off" id="update">
  <div class="group" style="margin:0.5em 0;">
    <div>
      <div id="one">
        <input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01">
        <label>One</label><br/>
      </div>
      <div id="two">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="02">
        <label>Two</label><br/>
      </div>
      <div id="three">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="03">
        <label>Three</label><br/>
      </div>
      <div id="four">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="04">
        <label>Four</label><br/>
      </div>
      <div id="five">
        <input type="checkbox" class="sing-chbx" name="choice[]" value="05">
        <label>Five</label><br/>
      </div>
    </div>
  </div>
  <input type="submit" id="submit" value="Confirm Submission">
</form>