Javascript 复选框中有多个条件

我有一个名为student_db的表，如下所示：-

Name    Gender  Grade   City
John    Male    2   North
Dave    Male    4   North
Garry   Male    3   North
Chirsty Female  5   East
Monica  Female  4   East
Andrew  Male    3   East
Patrick Male    7   South
Maria   Female  3   South

我需要用这个列表选择3个学生，学生的名字作为输入。但也有一些制约因素：

1） 必须选择1名女性

2） 最多可选择来自同一城市的2人

3） 所选3人的等级总和不能超过11

4） 一旦做出三个有效选择，其余复选框将自动冻结

5） 如果在选择人员时违反了任何约束，则会取消选中该特定选择，并向用户显示一条警告消息

是否可以在复选框中添加这么多约束

---

编辑

我已设法添加了两个约束条件：-

1） 如果等级总和超过11，将显示警报消息

2） 一旦做出三个有效选择，其余复选框将被冻结

这就是我尝试过的：-

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function() {
        var max = 3;
        var checkboxes = $('input[type="checkbox"]');

        checkboxes.change(function() {
            var current = checkboxes.filter(':checked').length;
            checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
        });
    });
</script>

<script>
    function jsFunction(element) {
        var sum = 0,i;
        var elements = document.getElementsByClassName('chkbox');

        for (i = 0; i<elements.length; i++) {
            if (elements[i].checked) {
                sum += parseInt(elements[i].value);
            }
        }

        if (sum > 11) {
            alert("11 maximum grade allowed !!");
            element.checked = false;
        }
    }
</script>

<form name='checkbox1[]' method="post" action="select_student.php">       
    <label class="cb1" for="checkbox1"> </label>
    <input type="hidden" name="checkbox1[]" id="check" value="null">

    <?php
        session_start();
        mysql_connect("localhost", "my_db", "my_password") or die (mysql_error ());
        mysql_select_db("my_db") or die(mysql_error());
        $strSQL = "SELECT Name,Grade FROM student_db";
        $rs = mysql_query($strSQL);
        echo "<b><h2>List of Students :-</h2></b>";

        while($row = mysql_fetch_array($rs)) {
            $man = $row['Name'];
            echo '<input type="checkbox" value="'.$row['Name'].'|'.$row['Grade'].'" class="chkbox"  name="checkbox1[]" onchange="jsFunction(this)" />';
            echo $man;
        }
    ?>
    <br>

    <input type="submit" value="SUBMIT" id="button1" style= "height:40px; width:150px; font-weight: bold; font-size:10;">
</form>

jQuery（函数（）{
var max=3；
var复选框=$（'input[type=“checkbox”]”）；
复选框。更改（函数（）{
var current=复选框。过滤器（':checked'）。长度；
复选框。过滤器（'：未（：选中））.prop（'disabled'，current>=max）；
});
});
函数jsFunction（元素）{
var总和=0，i；
var elements=document.getElementsByClassName（'chkbox'）；
对于（i=0；i 11）{
警报（“允许的最大等级为11！！”；
element.checked=false；
}
}

---

JS函数用于检查成绩总和是否超过11，一旦做出3个有效选择，jQuery函数将冻结其他框。但我无法添加其他限制。

很抱歉延迟响应！我昨天被别的事情缠住了，今天早上我得去接。希望这能帮到你

你有一个很好的开始。以下是我建议的一些变化：

1） 首先，一些HTML更改：

• 将所有学生数据（即“性别”、“年级”和“城市”值）存储为复选框中的

  data

  属性，如下所示：

  <input type="checkbox" value="NAME_VALUE" class="chkbox" name="checkbox1[]"
         data-gender="GENDER_VALUE" data-grade="GRADE_VALUE" data-city="CITY_VALUE"
         onchange="jsFunction(this)" />
  

  <input type="checkbox" value="NAME_VALUE" class="chkbox" name="checkbox1[]"
         data-gender="GENDER_VALUE" data-grade="GRADE_VALUE" data-city="CITY_VALUE" />
  

  。在脚本中，页面加载后：

  $(".chkbox").on("change", jsFunction);
  

• 最后（作为提示），如果您打算使用带有

  for

  属性的
  标记（例如，您正在为“隐藏”输入显示一个标记），您需要在您的
  属性中匹配

  id

  ，以便将它们配对

2） 至于您的脚本，我将以下内容放在一起，以完成您正在寻找的所有验证检查，并标准化您的一些代码（您大量混合使用jQuery和vanilla JS）

var MAX_CHECKED=3；
var MAX_品位=11；
$（“文档”）.ready（函数（）{
美元（“.chkbox”）。打开（“更改”，jsFunction）；
});
函数jsFunction（）{
var总和=0；
var cities=[]；
变量元素=$（“.chkbox”）；
var checkedElements=elements.filter（“：checked”）；
checkedElements.each（函数（）{
sum+=parseInt（$（此）.data（“等级”），10）；
cities.push（$（this.data）（“city”）；
});
var uniqueCities=cities.filter（函数（currentCity、cityIndex、cityArray）{
返回（cityIndex==cityArray.indexOf（currentCity））；
});
如果（总和>最大坡度）{
警报（最高等级+“允许的最高等级！！”）；
$（this）.prop（“选中”，false）；
}
else if（uniqueCities.length！==cities.length）{
警告（“您不能从每个城市选择多个学生！！”；
$（this）.prop（“选中”，false）；
}
否则{
如果（checkedElements.length>=选中的最大值）{
if（checkedElements.filter（“[data-gender='Female']”）。长度<1）{
警告（“必须至少选择一名女生！！”；
$（this）.prop（“选中”，false）；
}
否则{
元素。过滤器（':not（：checked'））.prop（'disabled'，true）；
}
}
否则{
元素.filter（':not（：checked）'）.prop（'disabled'，false）；
}
}
}

大部分代码应该非常简单。让我来谈谈几个关键或更复杂的部分

• 全局变量-我将全局变量（

  MAX_CHECKED

  和

  MAX_GRADE

  ）设置在任何函数的顶部和外部，以便它们可以在任何地方访问并易于更新（即，您不必搜索代码来查找它们）
• “设置代码”-我从用于

  $（“文档”）的
  jQuery（function（）{
  ）中移动了设置代码。准备就绪（function（）{

  只是为了可读性：）它们做同样的事情
• 事件绑定复选框-正如我所提到的，我使用

  $（“.chkbox”）；在（“change”，jsFunction）；

  上动态地而不是内联地进行了绑定。此外，您会注意到我更改了选择器。由于每个复选框都标记了“chkbox”类，因此我基于此进行了选择，它比

  $（“input[type”）要快得多=“复选框”]）

• 验证逻辑-基本上，您希望尽快捕获无效条目，并且您有两类规则：在满足最大选择数之前可以检查的规则和需要最大选择数的规则。“最大等级”和“唯一城市”“检查应在点击时立即被捕获，但您必须等到达到最大选择数后才能检查性别，因为如果女学生尚未达到最大选择数，用户可以在稍后检查女学生

• uniqueCities

  -用于创建此值的函数并不像代码的其余部分那样严格，因此我将稍微澄清一下。它使用

  数组

  固有的

  .filter

  方法进行精简

  var MAX_CHECKED = 3;
  var MAX_GRADE = 11;
  
  $("document").ready(function() {
      $(".chkbox").on("change", jsFunction);
  });
  
  function jsFunction() {
      var sum = 0;
      var cities = [];
  
      var elements = $(".chkbox");
      var checkedElements = elements.filter(":checked");
  
      checkedElements.each(function() {
          sum += parseInt($(this).data("grade"), 10);
          cities.push($(this).data("city"));
      });
  
      var uniqueCities = cities.filter(function(currentCity, cityIndex, cityArray) {
          return (cityIndex === cityArray.indexOf(currentCity));
      });
  
      if (sum > MAX_GRADE ) {
          alert(MAX_GRADE + " maximum grade allowed!!");
          $(this).prop("checked", false);
      }
      else if (uniqueCities.length !== cities.length) {
          alert("You may not select more than one student from each city!!");
          $(this).prop("checked", false);
      }
      else {
          if (checkedElements.length >= MAX_CHECKED) {
              if (checkedElements.filter("[data-gender='Female']").length < 1) {
                  alert("At least one female student must be selected!!");
                  $(this).prop("checked", false);
              }
              else {
                  elements.filter(':not(:checked)').prop('disabled', true);
              }
          }
          else {
              elements.filter(':not(:checked)').prop('disabled', false);
          }
      }
  }