验证检查输入的长度

Question

我在尝试验证带有附加内容的选中输入的数量时遇到问题。它总是提醒 0，而不是 1、2、3 或 4，具体取决于我 select.

的数量

问题出在附加内容上，因为我尝试使用平面 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");
    }
});

这是我的附加脚本，它在 body 负载上运行：

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 放在平整的 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 方法来捕获动态内容上的事件，但您仍然只使用页面加载时出现的那些元素。

考虑到这一点，我建议您应该在 [=24] 时重新查询相关元素的 DOM 而不是 creating/initialising 页面加载时的 $checks =] 函数，给出：

$("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 的结构，此建议是建立在不完整信息之上的。

验证检查输入的长度

verify length of checked inputs

javascript

ajax

jquery

append