Question

当我尝试验证带有附加内容的已检查输入的数量时，我遇到了问题。它始终警告0，而不是1,2,3或4，具体取决于我选择的数量。

问题来自附加内容，因为我尝试使用平面HTML，没有添加内容，而且它正在工作。

这是我的剧本：

var $checks = $("body").on("change",".table",function () {
    if ($checks.filter(":checked").length<3)
    {
        $(".formular").toggle($checks.filter(":checked").length>0);
        $checks.not(".ignore").removeAttr("disabled");
        alert($checks.filter(":checked").length);
    } else {
        $checks.not(":checked").attr("disabled", "disabled");
    }
});

这是我的附加脚本，它在正文载入下运行：

function local() {
    var id = getUrlParameter('id');
    var tip = getUrlParameter('tip');
    $.getJSON('http://rezerv.city/engine/app/local_mobil.php?tip='+ tip +'&id='+ id +'', function(data) {    
        $.each(data, function(key, val) {
            if (val.culoare == 'rosu')
            {
                var disable='disabled="disabled"';
                var ignore='ignore';
                var bg='background-image:url(http://rezerv.city/images/masa_bg3_60.png); background-repeat:no-repeat;';
            } else {
                var disable='';
                var ignore='';
                var bg='background-image:url(http://rezerv.city/images/masa_bg60.png); background-repeat:no-repeat;';
            }
            $(".plan_mese4").append('\
                <label class="masa_bg masa_bg_4 patru" data-toggle="tooltip" data-trigger="click hover" data-placement="bottom" style="margin-top:300px;margin-left:693px;'+ bg +'" data-original-title="" title="">\
                    <input class="table '+ ignore +'" type="checkbox" value="'+ val.mese +'" id="M'+ val.mese +'" name="masa[]" '+ disable +'><h4>'+ val.mese +'</h4><h5 class="nr_pers">'+ val.nr_pers +' persoane</h5>\
                </label>\'
            );
        });
    });
}

这里是附加的html，正如我所说的，如果我把平面html它正在工作，但是当我把它附加到div里面时不会占用长度

<label style="margin-top:370px;margin-left:780px;background-image:url(http://rezerv.city/images/masa_bg_cerc.png); background-repeat:no-repeat;" data-placement="bottom" data-trigger="click hover" data-toggle="tooltip" class="masa_bg masa_bg_4 patru" data-original-title="" title="">
    <input type="checkbox" name="masa[]" id="1C" value="342" class="table">
    <h4>1C</h4>
    <h5 class="nr_pers">10 persoane</h5>

</label>
<label style="margin-top:370px;margin-left:780px;background-image:url(http://rezerv.city/images/masa_bg_cerc.png); background-repeat:no-repeat;" data-placement="bottom" data-trigger="click hover" data-toggle="tooltip" class="masa_bg masa_bg_4 patru" data-original-title="" title="">
    <input type="checkbox" name="masa[]" id="1C" value="342" class="table">
    <h4>1C</h4>
    <h5 class="nr_pers">10 persoane</h5>

</label>
<label style="margin-top:370px;margin-left:780px;background-image:url(http://rezerv.city/images/masa_bg_cerc.png); background-repeat:no-repeat;" data-placement="bottom" data-trigger="click hover" data-toggle="tooltip" class="masa_bg masa_bg_4 patru" data-original-title="" title="">
    <input type="checkbox" name="masa[]" id="1C" value="342" class="table">
    <h4>1C</h4>
    <h5 class="nr_pers">10 persoane</h5>

</label>
<label style="margin-top:370px;margin-left:780px;background-image:url(http://rezerv.city/images/masa_bg_cerc.png); background-repeat:no-repeat;" data-placement="bottom" data-trigger="click hover" data-toggle="tooltip" class="masa_bg masa_bg_4 patru" data-original-title="" title="">
    <input type="checkbox" name="masa[]" id="1C" value="342" class="table">
    <h4>1C</h4>
    <h5 class="nr_pers">10 persoane</h5>

</label>

Answer 1

尝试：

$("body").on("change",".table",function () {
    var $checks = $(this).closest('div[class^="plan_mese"]').find('input[type="checkbox"]');
    if ($checks.filter(":checked").length<3)
    {
        $(".formular").toggle($checks.filter(":checked").length>0);
        $checks.not(".ignore").removeAttr("disabled");
        alert($checks.filter(":checked").length);
    } else {
        $checks.not(":checked").attr("disabled", "disabled");
    }
});

Answer 2

我怀疑问题是$checks变量的分配，它似乎可能在页面加载时运行;这意味着虽然您已经使用jQuery方法捕获动态内容上的事件，但您仍然只使用页面加载时出现的那些元素。

考虑到这一点，我建议不要在页面加载时创建/初始化$checks，而是在运行函数时重新查询相关元素的DOM，给出：

$("body").on("change",".table",function () {
    var $checks = $('input[type=checkbox]');

    if ($checks.filter(":checked").length < 3) {

        $(".formular").toggle($checks.filter(":checked").length > 0);
        $checks.not(".ignore").removeAttr("disabled");
        alert($checks.filter(":checked").length);
    } else {
        $checks.not(":checked").attr("disabled", "disabled");
    }
});

但遗憾的是，由于我们无法看到您的HTML或DOM的结构，因此这个建议建立在不完整的信息之上。

验证已检查输入的长度

2 个答案: