CODEWITHSUNDEEP
jquerycheckbox
Gadgetster
Gadgetster

Reputation: 483

Jquery selection and disabling multiple checkboxes by passing data attributes

I am trying to get a dynamic checkbox selection going. My actual code retrieves values from the database to create the id's so I hardcored values for my question.

If I select Section 1, the Cat 1 and Sub cat 1 should be checked. If I select Cat 1, then Sub cat 1 should get checked.

I seem to be missing something somewhere but I can't spot it!

http://jsfiddle.net/h4zLn/

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

Upvotes: 0

Views: 659

Answers (2)

Just code
Just code

Reputation: 13801

I don't think so much you have to change all the thing is you will have to change this i have made two changes in your code ;)

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

Working Demo

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20636

You need to change the last two if() conditions.

  • In case of CAT you need data attribute section_list and not section_sub_list. Section does not have attribute - section_sub_list

  • In case of SubCat you need data attribute cat_id and not sub_cat_id. CAT does not have attribute - 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);
        }
    });
});

Upvotes: 1

Related Questions