使用jquery引用嵌套div中的复选框

我在div中有一些复选框，这些复选框受

data max answers

中的数字限制（从Wordpress获取）。因此，如果该数字为2，则用户只能勾选其中的2个复选框，其他复选框将变灰

我遇到的问题是，我不知道如何深入到div以锁定复选框，有人能帮我吗

我有一个简化的版本，其中复选框直接位于div中，这可以很好地工作，但在我的版本中没有嵌套div-

我看到了

未捕获引用错误：未定义toggleInputs

---

当我单击url上的复选框时。是否有任何理由包装每个单独的jquery函数？尝试将您的toggleInputs函数与输入单击函数放在同一个包装器中

您能指出给您带来问题的具体行吗？@JamesMontagne在问题链接的小提琴中，所有复选框都在一个div中，而我的复选框是嵌套的。我认为这与jquery有关，特别是第二个功能块。我在这里使用了相同的嵌套结构和您的js代码，它工作得很好…-也许您可以向我们展示您的html源代码（而不是php），这样我们就可以看看是否存在问题。另外，您是否在控制台中看到任何错误？这不会对您的代码产生任何影响。您是否调试了代码以找出错误所在？也许您可以创建一个不工作的代码。我试过了，效果很好。

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