Question

我正在尝试进行动态复选框选择。我的实际代码从数据库中检索值以创建id，所以我为我的问题硬编了值。

如果我选择第1部分，则应检查Cat 1和Sub cat 1。如果我选择Cat 1，则应检查Sub cat 1。

我似乎在某处丢失了某些东西，但我无法发现它！

Jquery的：

$(function() {
    $("input[type=checkbox]").change(function() {

            var section_list = $(this).data().section_list;     
            var cat_id = $(this).data().cat_id;     

            if ($(this).hasClass("category_all")) {
                var all_list = $("input.category_all[type=checkbox]:checked").length;       
                $(".all_select").prop("checked", all_list).prop("disabled", all_list);      
            }           
            else if ($(this).hasClass(section_list+"_list")) {  
                var section_sub_list = $(this).data().section_sub_list;
                var main_list = $("input."+section_list+"_list[type=checkbox]:checked").length; 
                $("."+section_sub_list+"_sub_list").prop("checked", main_list).prop("disabled", main_list);
            }       
            else if ($(this).hasClass("cat_id_"+cat_id)) {
                var sub_cat_id = $(this).data().sub_cat_id;
                var list = $("input.cat_id_"+cat_id+"[type=checkbox]:checked").length;
                $(".sub_cat_id_"+sub_cat_id).prop("checked", list).prop("disabled", list);
            } 
    });
});

HTML：

<input type="checkbox" class="category_all">All<br><br>

Section<br>
<input type="checkbox" data-section_list = "1"  class="all_select 1_list">1
<input type="checkbox" data-section_list = "2"  class="all_select 2_list">2 
<input type="checkbox" data-section_list = "3"  class="all_select 3_list">3

<br><br>Cat<br>
<input type="checkbox" data-section_sub_list = "1" data-cat_id = "1" class="all_select 1_sub_list cat_id_1">1
<input type="checkbox" data-section_sub_list = "2" data-cat_id = "2" class="all_select 2_sub_list cat_id_2">2
<input type="checkbox" data-section_sub_list = "3" data-cat_id = "3" class="all_select 3_sub_list cat_id_3">3

<br><br>Sub cat<br>
<input type="checkbox" data-sub_cat_id = "1" class="all_select 1_sub_list sub_cat_id_1">1
<input type="checkbox" data-sub_cat_id = "2" class="all_select 2_sub_list sub_cat_id_2">2
<input type="checkbox" data-sub_cat_id = "3" class="all_select 3_sub_list sub_cat_id_3">3

Answer 1

我认为你不得不改变所有的事情是你必须改变这一点我在你的代码中做了两处更改;）

   $(function() {
        $("input[type=checkbox]").change(function() {

                var section_list = $(this).data().section_list;     
                var cat_id = $(this).data().cat_id;     

                if ($(this).hasClass("category_all")) {
                    var all_list = $("input.category_all[type=checkbox]:checked").length;       
                    $(".all_select").prop("checked", all_list).prop("disabled", all_list);      
                }           
                else if ($(this).hasClass(section_list+"_list")) {  
                    var section_sub_list = $(this).data().section_sub_list;

                    var main_list = $("input."+section_list+"_list[type=checkbox]:checked").length; 
                    $("."+section_list+"_sub_list").prop("checked", main_list).prop("disabled", main_list); // changed here
                }       
                else if ($(this).hasClass("cat_id_"+cat_id)) {
                    var sub_cat_id = $(this).data().sub_cat_id;
                    var list = $("input.cat_id_"+cat_id+"[type=checkbox]:checked").length;
                    $(".sub_cat_id_"+cat_id).prop("checked", list).prop("disabled", list);//changed here
                } 
        });
    });

工作Demo

Answer 2

您需要更改最后两个if()条件。

如果是CAT，您需要数据属性section_list而不是section_sub_list。部分没有属性 - section_sub_list
如果是SubCat，您需要数据属性cat_id而不是sub_cat_id。 CAT没有属性 - sub_cat_id

Working Demo

$(function () {
    $("input[type=checkbox]").change(function () {

        var section_list = $(this).data().section_list;
        var cat_id = $(this).data().cat_id;

        if ($(this).hasClass("category_all")) {

            var all_list = $("input.category_all[type=checkbox]:checked").length;
            $(".all_select").prop("checked", all_list).prop("disabled", all_list);

        } else if ($(this).hasClass(section_list + "_list")) {

            var section_sub_list = $(this).data().section_sub_list;
            var main_list = $("input." + section_list + "_list[type=checkbox]:checked").length;
            $("." + section_list + "_sub_list").prop("checked", main_list).prop("disabled", main_list);

        } else if ($(this).hasClass("cat_id_" + cat_id)) {

            var sub_cat_id = $(this).data().cat_id;
            var list = $("input.cat_id_" + cat_id + "[type=checkbox]:checked").length;
            $(".sub_cat_id_" + sub_cat_id).prop("checked", list).prop("disabled", list);
        }
    });
});

Jquery选择并通过传递数据属性禁用多个复选框

2 个答案:

Working Demo