Question

他是我的新手，需要专家的帮助。我试图根据条件限制复选框。例如，如果用户选择的银行代码为MBS，则他们只能选择3个复选框，而如果银行代码为MBV，则他们只能选择5个复选框。以下是我要使用的代码。

    <script type = "text/javascript" >
        function checkboxlimit(bankcode, checkgroup, limit) {
            var bankcode = document.frmSearch.bank_code
            var checkgroup = checkgroup
            var limit = limit
            for (var i = 0; i < checkgroup.length; i++) {
                checkgroup[i].onclick = function () {
                    var checkedcount = 0
                    for (var i = 0; i < checkgroup.length; i++)
                        checkedcount += (checkgroup[i].checked) ? 1 : 0
                    if (bankcode == 'MBS')
                        if (checkedcount > limit) {
                            alert("You can only select a maximum of " + limit + " checkboxes")
                            this.checked = false
                        }
                }
            }
        }

    </script>

    <form id = "status"
          name = "status" >
        <input type = "checkbox"
               name = "check" /> london <br/>
        <input type = "checkbox"
               name = "check"/> japan <br/>
        <input type = "checkbox"
               name = "check"/> usa <br/>
        <input type = "checkbox"
               name = "check"/> korea <br/>
        <input type = "checkbox"
               name = "check"/> egypt <br/>
    </form>

    <script type = "text/javascript" >
        checkboxlimit(document.frmSearch.bank_code, document.forms.status.check, 2) 
    </script>

Answer 1

这是我假设只有两种银行代码（MBV和MBS）时使用jQuery的方式

<script type="text/javascript">
    function checkboxlimit(bankcode) {
        var limit =  bankcode === "MBS" ? 3 : 5;
        $(':checkbox').on('change', function(evt) {
            if($(this).siblings(':checked').length >= limit) {
                this.checked = false;
            }
        });
    }
</script>

<form id="status" name="status">
    <input type="checkbox" name="check"/>london<br/>
    <input type="checkbox" name="check"/>japan<br/>
    <input type="checkbox" name="check"/>usa<br/>
    <input type="checkbox" name="check"/>korea<br/>
    <input type="checkbox" name="check"/>egypt<br/>
</form>

<script typ="text/javascript">
    checkboxlimit(document.frmSearch.bank_code) 
</script>

PS：我不知道这（ document.frmSearch ）的功能，因为代码片段的功能尚不清楚，但是我选择保留它，因为您在原始版本中提供了它代码。

Answer 2

您可以使用变量来跟踪检查了多少个元素。可以使用复选框上的onchange事件来更新此变量。 Here a JSFiddle并附有完整的示例。

奖金

当达到限制时，您可以禁用未选中的框，以便用户不能选中超出允许范围的框。参见this JSFiddle example。

根据条件限制复选框

2 个答案: