jQuery Multiple Checkbox Selection Quantity Limit Method

2021-07-18 06:41:28
OfStack

Found on the Internet, you can use it. After refreshing, the multi-selection box will remain selected. At this time, bug can still be selected after the quantity meets the requirements. It is OK to add a processing to judge whether the quantity meets the requirements.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Untitled document </title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(function(){

// Plus judge whether the quantity requirements are met 
  if($(":checkbox").size()>=3){
     $(":checkbox").removeAttr("checked");
     $(":checkbox").attr("disabled","disabled");
     $(":checkbox").removeAttr("disabled");
   }

  var num = 0;
  $(":checkbox").each(function(){
    $(this).click(function(){
      if($(this)[0].checked) {
        ++num;
        if(num == 3) {
          //alert(" Maximum choice  3 Items   The upper limit of is full ,  Other options will become unavailable .");
          $(":checkbox").each(function(){
            if(!$(this)[0].checked) {
              $(this).attr("disabled", "disabled");
            }
          });
        }
      } else {
        --num;
        if(num <= 2) {
          $(":checkbox").each(function(){
            if(!$(this)[0].checked) {
              $(this).removeAttr("disabled");
            }
          });
        }
      }
    });
  });
})
</script> 
</head>

<body>
<input type="checkbox" /> Internet access <br />
<input type="checkbox" /> Tourism <br />
<input type="checkbox" /> Shopping <br />
<input type="checkbox" /> Games <br />
<input type="checkbox" /> Listen to a song <br />
<input type="checkbox" /> Shopping <br />
</body>
</html>