javascript - 是否可以将多种形式的“选择的复选框数量限制”放入循环中？

Question

我正在创建一个页面，用户将在该页面上填写由多个表单组成的表单。这些形式中的每一种都有不同的最大可能答案数。如何最小化代码行数并将这段代码放入循环中？我尝试基于数组进行循环，但我仍然不知道$("input[name='Pytanie1']")每次循环通过它时如何更改。我想放入循环的javascript：

        $(document).ready(function () {
            $("input[name='Question1']").change(function () {
                var maxAllowed = 2; 
                var cnt = $("input[name='Question1']:checked").length;
                if (cnt > maxAllowed) {
                    $(this).prop("checked", "");
                    alert('Choose max. ' + maxAllowed + ' answers!');
                }
            });
        });

        $(document).ready(function () {
            $("input[name='Question2']").change(function () {
                var maxAllowed = 3; 
                var cnt = $("input[name='Question2']:checked").length;
                if (cnt > maxAllowed) {
                    $(this).prop("checked", "");
                    alert('Choose max. ' + maxAllowed + ' answers!');
                }
            });
        });

        $(document).ready(function () {
            $("input[name='Question3']").change(function () {
                var maxAllowed = 3; 
                var cnt = $("input[name='Question3']:checked").length;
                if (cnt > maxAllowed) {
                    $(this).prop("checked", "");
                    alert('Choose max. ' + maxAllowed + ' answers!');
                }
            });
        });

谢谢你的帮助！

Answer 1

好吧，您可以简单地创建一个最大允许值数组：

var maxAllowed = [2, 3, 3];

并迭代：

for (var i = 0; i < maxAllowed.length; i++) {
    $(document).ready(function () {
        var j = i;
        $("input[name='Question" + (j + 1) + "']").change(function () {
            var cnt = $("input[name='Question" + (j + 1) + "']:checked").length;
            if (cnt > maxAllowed[j]) {
                $(this).prop("checked", "");
                alert('Choose max. ' + maxAllowed[j] + ' answers!');
            }
        });

    });
}

编辑：我之前的代码中似乎有一个关闭错误。对不起

Answer 2

一个可重用的 HTML 驱动的解决方案

我创建了一个解决方案，它使用data-HTML 属性来提供最大值和可重用的 jQuery 代码，这些代码可以放在任何需要它的页面上，或者可以更改为 jQuery 插件。

这是我使用的 HTML

<div class="q" data-max="3">
    <h3>Question 1 with max 3</h3>
    <input type="checkbox">Answer 1</input><br/>
    <input type="checkbox">Answer 2</input><br/>
    <input type="checkbox">Answer 3</input><br/>
    <input type="checkbox">Answer 4</input><br/>
    <input type="checkbox">Answer 5</input>
</div>
<div class="q" data-max="2">
    <h3>Question 2 with max 2</h3>
    <input type="checkbox">Answer 1</input><br/>
    <input type="checkbox">Answer 2</input><br/>
    <input type="checkbox">Answer 3</input><br/>
    <input type="checkbox">Answer 4</input><br/>
    <input type="checkbox">Answer 5</input>
</div>

以及驱动它的Javascript

$(".q").each(function(){
    $(this).data("selected", 0);
});

$("input[type=checkbox]").click(function(evt){
    var q = $(this).closest(".q");

    if (this.checked && q.data("max") === q.data("selected"))
    {
        alert("You can choose at most " + q.data("max") + " answers");
        evt.preventDefault();
        return false;
    }

    q.data("selected", q.data("selected") + (this.checked ? 1 : -1));
});