javascript - 在复选框限制后显示消息(多个实例)

Question

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

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

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>