Question

我有2个DIV容器，其中都包含Checkbox元素。我想申请这样的限制从DIV2最多可以选择7个复选框，从DIV1用户可以选择所有checbox。但是从DIV1和DIV2检查的checbox总数不应超过10。

每次检查/取消选中时，选中的复选框的计数器为10，然后保留未选中的复选框将被禁用。

<div id="main DIV">
    <div id="DIV1">
        <input type="checkbox" checked/>1 
        <input type="checkbox" checked/>2 
        <input type="checkbox" checked/>3<br/>
        <input type="checkbox" checked/>4 
        <input type="checkbox" checked/>5 
    </div>

    <div id="DIV2">
        <input type="checkbox" checked/>1 
        <input type="checkbox" checked/>2 
        <input type="checkbox" checked/>3<br/>
        <input type="checkbox" checked/>4 
        <input type="checkbox" checked/>5 
        <input type="checkbox" checked/>6
        <input type="checkbox" checked/>7
        <input type="checkbox" checked/>8
        <input type="checkbox" checked/>9
    </div>
</div>

Answer 1

var div2Cbs = $("#DIV2 :checkbox");

var allCbs = div2Cbs.add("#DIV1 :checkbox").on("click", function() {
  var disable2 = div2Cbs.filter(":checked").length >= 7;
  var disableAll = allCbs.filter(":checked").length >= 10;
  allCbs.filter(":not(:checked)").prop("disabled", disableAll);
  div2Cbs.filter(":not(:checked)").prop("disabled", disable2 || disableAll);
});

div { border: thin black solid; margin: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="DIV1">
<input type="checkbox"/>1 
  <input type="checkbox"/>2 
  <input type="checkbox"/>3<br/>
  <input type="checkbox"/>4 
  <input type="checkbox"/>5 
</div>

<div id="DIV2">
<input type="checkbox"/>1 
  <input type="checkbox"/>2 
  <input type="checkbox"/>3<br/>
  <input type="checkbox"/>4 
  <input type="checkbox"/>5 
 <input type="checkbox"/>6
 <input type="checkbox"/>7
 <input type="checkbox"/>8
 <input type="checkbox"/>9
</div>

Answer 2

试试

//Give you the length of the checked chechbox under `mainDIV`
$('#mainDIV input[type="checkbox"]:checked').length

请确保ID不应有空格。 mainDIV代替main DIV。

在Jquery中使用parent child选项来提供限制。
:checked和:not(:checked)将帮助您实现这一目标。

希望这个暗示足以理解。

设置限制选择Checbox

2 个答案: