Question

如何在每个实例的基础上显示.checkboxmsg checkbox限制仅适用于每个.checkboxdiv下的复选框？

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true;  
        document.getElementsByClassName("checkboxmsg")[0].style.display = "block"
        

      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false;  document.getElementsByClassName("checkboxmsg")[0].style.display = "none"
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

.checkboxmsg{
 display: none;
 color : red !important;
}
.checkboxdiv {
  border: 2px solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

Answer 1

您需要根据不同的标识来区分组框，例如名称，以便每个组框都具有可达限制且可单独查询。

＆＃13;

limit = {"check1":0,"check2":0}; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {

  if (elem.checked) { //if checked, increment counter
    limit[$(elem).prop("name")]++;
  } else {
    limit[$(elem).prop("name")]--; //else, decrement counter
  }
  
  checkboxes = document.querySelectorAll('.checkboxdiv input[name="' + $(elem).prop("name") + '"]');
  
  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit[$(elem).prop("name")] == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true;  
        document.getElementsByClassName("checkboxmsg")[0].style.display = "block"
        

      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false;  document.getElementsByClassName("checkboxmsg")[0].style.display = "none"
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

＆＃13;

.checkboxmsg{
 display: none;
 color : red !important;
}
.checkboxdiv {
  border: 2px solid
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxdiv">
  <input type="hidden" name="check1" value="">
  <input type="checkbox" name="check1" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check1" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check1" value="Three"><label>Three</label>
</div>
<div class="checkboxdiv">
  <input type="hidden" name="check2" value="">
  <input type="checkbox" name="check2" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check2" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check2" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

＆＃13;

Answer 2

jQuery版

使用$(this).closest('.checkboxdiv')查找活动复选框的父级

https://api.jquery.com/closest/

var limit = 2;

$(':checkbox').change(function(){
  var checked = 0;
  var parent = $(this).closest('.checkboxdiv');
  parent.find('.checkboxmsg').hide();
  parent.find(':checkbox').each(function(){
    if ($(this).is(':checked')) {
      checked++;

      // check if limit is reached
      if (checked >= limit) {
        parent.find(":checkbox:not(:checked)").attr('disabled', true);
        parent.find('.checkboxmsg').show();
      } else {
        parent.find(":checkbox").attr('disabled', false);
      }

    }
  });
});

.checkboxmsg{
 display: none;
 color : red !important;
}
.checkboxdiv {
  border: 2px solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
  <div class="checkboxmsg">Only two options are allowed</div>
</div>
<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
  <div class="checkboxmsg">Only two options are allowed</div>
</div>

复选框限制后显示消息（多个实例）

2 个答案: