Question

我在div中有一些复选框，受data-max-answers中的数字限制（从Wordpress中获取）。因此，如果该数字为2，则用户只能勾选其中两个复选框，而其他复选框显示为灰色。

我遇到的问题是，我无法弄清楚如何向下钻取div来定位复选框，任何人都可以帮助我吗？

我有一个简化版本，其中的复选框直接位于div中，这样可以正常工作，但是无法让它适用于我的嵌套div - http://jsfiddle.net/pVA3d/4/。

<div class="question" data-max-answers="<?php echo $repeater_row['required_answers']; ?>">
    <?php $rows = $repeater_row['answer_options'];
    foreach ($rows as $row){ ?>
    <?php $Question[$counter] = $_POST['answer'.$counter]; ?>
    <div style="display:table-row;">
        <div style="display:table-cell;">
            <input style="width: 20px;" type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
        </div>
        <div style="display:table-cell;">
            <p>
                <?php echo $row['answer']; ?>
            </p>
        </div>              
    </div>
    <?php } ?>
</div>

Jquery的：

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

jQuery(function($) {
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);
        }
    }
}
});

Answer 1

我正在看

Uncaught ReferenceError: toggleInputs is not defined

点击你的网址上的复选框。你有没有理由包装每个单独的jquery函数？尝试将toggleInputs函数放在与输入单击函数相同的包装器中

嵌套div中的引用复选框，带有jquery

1 个答案: