jquery - jquery でネストされた div 内のチェックボックスを参照する

Question

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>

Jクエリ:

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