php - 动态限制用户可以选中的复选框数量

Question

我创建了一个测试和回答系统。每个问题可以有一个或多个答案，例如“请标记 1 个答案”、“请标记 3 个答案”等。

是否可以根据此限制用户可以检查的复选框数量？如果问题需要 1 个答案，则他们只能选中其中 1 个复选框。

<?php foreach ($rows as $row){ ?>
   <input type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
   <?php echo $row['answer']; ?>
<?php } ?>

它循环遍历并提取每个答案，每个问题所需的答案数量是动态的，并由该字段控制(可以是 1、2、3 等):

<?php echo $repeater_row['required_answers']; ?>

<小时/>

使用下面的 jquery，尽管这不是动态的:

$(document).ready(function () {
    if ($("input:checkbox:checked").length >= 3) {
        $("input:checkbox").not(":checked").attr("disabled", 3);
    }
    $("input:checkbox").click(function () {
        var bol = $("input:checkbox:checked").length >= 3;
        $("input:checkbox").not(":checked").attr("disabled", bol);
    });
});

我怎样才能动态地做到这一点？每个问题都有以集合命名的答案，因此第一个问题有一个答案集，其输入名为 name="answer1[]"，第二个问题有一个答案集 name="answer2 []"等等。

Answer 1

我会将每组答案包装在带有 max-answers 属性的 div 中，并在 JavaScript 中使用该属性值。

这是一个工作 fiddle :http://jsfiddle.net/pVA3d/4/

我的 HTML

<div class="question" data-max-answers="2">
    Here's a question with up to two answers: <br>
    <input type="checkbox" name="answer1[]" value="A"> A <br>
    <input type="checkbox" name="answer1[]" value="B"> B <br>
    <input type="checkbox" name="answer1[]" value="C"> C <br>
    <input type="checkbox" name="answer1[]" value="D"> D <br>
</div>
<div class="question" data-max-answers="4">
    Here's a question with up to 4! <br>
    <input type="checkbox" name="answer2[]" value="A"> A <br>
    <input type="checkbox" name="answer2[]" value="B"> B <br>
    <input type="checkbox" name="answer2[]" value="C"> C <br>
    <input type="checkbox" name="answer2[]" value="D"> D <br>
    <input type="checkbox" name="answer2[]" value="E"> E <br>
    <input type="checkbox" name="answer2[]" value="F"> F <br>
</div>

我的 JavaScript

$(document).ready(function () {
    $("input[type=checkbox]").click(function (e) {
        if ($(e.currentTarget).closest("div.question").length > 0) {
            toggleInputs($(e.currentTarget).closest("div.question")[0]);        
        }
    });
});

function toggleInputs(questionElement) {
    if ($(questionElement).data('max-answers') == undefined) {
        return true;
    } else {
        maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
        if ($(questionElement).find(":checked").length >= maxAnswers) {
            $(questionElement).find(":not(:checked)").attr("disabled", true);
        } else {
            $(questionElement).find("input[type=checkbox]").attr("disabled", false);
        }
    }
}