复选框的多个条件 - Multiple Conditions to a checkbox

我有一个名为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人。

）入选3人的成绩之和不得超过11人。

4）做出三个有效选择后，其余复选框应自动冻结。

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

是否可以向复选框添加如此多的约束？

编辑

我设法添加了 2 个约束：-

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>

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)" />

接下来，由于您已经在使用 jQuery，为了将来清晰且易于维护，请动态应用 onchange 事件侦听器，而不是将其硬编码到输入中，如下所示：
```
<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属性的<label>标签（例如，您正在为"隐藏"输入显示一个标签），您将需要在 yout <input> 中匹配id属性，以便将它们配对。

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

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);
        }
    }
}

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

全局变量 - 我将全局变量（MAX_CHECKED和MAX_GRADE）设置在任何函数的顶部和外部，以便它们可以在任何地方访问并易于更新（即，您不必搜索代码即可找到它们）。
"设置代码" - 我将您的设置代码从您用来$("document").ready(function() {的jQuery(function() {中移出，只是为了可读性。 :) 他们做同样的事情。
绑定复选框的事件 - 正如我提到的，我使用 $(".chkbox").on("change", jsFunction); 动态而不是内联执行此操作。此外，您会注意到我更改了选择器。由于每个复选框都标有"chkbox"类，我基于此选择，它比$('input[type="checkbox"]')
验证逻辑 - 基本上，您希望尽快捕获无效条目，并且您有分为两类的规则：在满足最大选择数之前可以检查的规则和需要最大选择数的规则。 "最高等级"和"独特城市"检查应该在命中后立即捕获，但您必须等到达到最大选择后才能检查性别，因为如果用户尚未达到最大值，则用户可以随时检查女学生。
uniqueCities - 用于创建此值的函数不像代码的其余部分那样简单，因此我将稍微澄清一下。它使用Arrays原生的.filter方法，将选择缩减为仅唯一值。它通过执行回调来检查当前项（即 cityIndex）的索引是否与数组（即 cityArray）中该值的第一个实例（即 currentCity）的索引相同。如果是，则该值将添加到"过滤"数组（即 uniqueCities ）。
"取消禁用" - 我在 else 语句中添加了该语句，如果进行了最大数量的选择，则会重新启用复选框，但随后取消选中其中一个复选框。这将允许用户在某个时候改变主意，即使他们已经达到了最大值。

一些额外的注意事项

1）你最多需要将帕特里克的值更改为"6"，以检查"至少一个女性"逻辑是否有效。目前，来自独特城市的所有男学生中最低的组合是约翰、加里和帕特里克，但他们的总成绩是 12 分，因此首先触发"成绩总和太高"验证。 :)

2）虽然我没有介绍代码，但您还需要为"提交"按钮开发此验证逻辑的版本。如果你不这样做，那么有人可以选择两个男孩并点击"提交"，并且永远不会触发"至少一个女性"逻辑。

一种方法是将"至少一名女性"验证放在自己的方法中，并从"我刚刚点击了复选框"验证和"我刚刚点击了提交按钮"验证中调用两者。主要区别在于，对于提交，在触发"女性"检查之前，您不会检查是否已进行最大数量的选择。这也是添加"至少进行了一次选择"验证的好地方。