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

【问题标题】：Reference checkboxes within nested divs with jquery使用 jquery 引用嵌套 div 中的复选框
【发布时间】：2013-04-08 15:35:49
【问题描述】：

我在一个 div 中有一些复选框，它们受 data-max-answers 中的数字限制（从 Wordpress 中获取）。因此，如果该数字为 2，则用户只能勾选 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);
        }
    }
}
});

【问题讨论】：

你能指出给你带来问题的具体行吗？
@JamesMontagne 在问题中链接的小提琴中，所有复选框都在一个 div 内，而我的是嵌套的。我认为它与jquery有关，特别是第二个功能块。
我在这里使用了相同的嵌套结构和您的 js 代码，它运行良好...jsfiddle.net/pVA3d/5 - 也许您可以向我们展示您的 html 源代码（不是 php），以便我们查看是否有那里的问题。另外，您是否在控制台中看到任何错误？
根据您的代码，这不应该有任何区别。您是否调试过代码以找出问题所在？也许你可以用非工作代码创建一个小提琴。我试过了，效果很好。 jsfiddle.net/pVA3d/6

标签： jquery

【解决方案1】：

我看到了

Uncaught ReferenceError: toggleInputs is not defined

当我点击您网址上的复选框时。你有什么理由包装每个单独的 jquery 函数吗？尝试将您的 toggleInputs 函数与输入点击函数放在同一个包装器中

【讨论】：