如何最后不允许选中1个复选框

Question

我正在通过ajax从数据库中获取复选框值，其中每个用户都应该拥有一个或多个复选框。用户应从中选中所有复选框，最后只剩下一个。我的意思是一个复选框应保持未选中状态。

<div class="checkboxes">
<div class="selection">
<label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label>
</div>

</div>

Answer 1

希望这会有所帮助

function checkMe() {

  var selected = [];

  $('.selection input:checked').each(function() {
    selected.push($(this).attr('value'));
  });

  if (selected.length >= ($('.selection input').length)) {
    return false
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="checkboxes">
  <div class="selection">
    <label><input type="checkbox" value="5" onclick="return checkMe()" data-toggle="checkbox"> checkbox 1</label>
  </div><br/>
  <div class="selection">
    <label><input type="checkbox" value="10" onclick="return checkMe()" data-toggle="checkbox"> checkbox 2</label>
  </div><br/>
  <div class="selection">
    <label><input type="checkbox" value="15" onclick="return checkMe()"  data-toggle="checkbox">checkbox 3</label>
  </div>

</div>

Answer 2

您可以使用：$( "input[type=checkbox]" ).prop("checked", true);选中所有输入复选框。

和：$( "input[type=checkbox]" ).last().prop("checked", false);取消选中最后一个。

$( "input[type=checkbox]" ).prop("checked", true);
$( "input[type=checkbox]" ).last().prop("checked", false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes">
<div class="selection">
<label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label>
</div>

</div>

更新

正如OP所述：

您可以简单地使用：

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
      //if($(this).is($( "input[type=checkbox]" ).last())){
        $( "input[type=checkbox]" ).last().prop("checked", false);
      //}
    }
  }
});

取消选中最后一个复选框时的状态。并且当选中的复选框总数大于复选框的总数减一时。请注意，如果仅当选中最后一个复选框时才希望取消选中最后一个复选框，则可以取消注释。

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
      //if($(this).is($( "input[type=checkbox]" ).last())){
        $( "input[type=checkbox]" ).last().prop("checked", false);
      //}
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes">
<div class="selection">
<label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label>
</div>

</div>

如果要使其成为当前复选框，则在超过减一计数时取消选中它。

您可以使用：

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
        $(this).prop("checked", false);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes">
<div class="selection">
<label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label>
</div>

</div>