checkbox - Jquery selection and disabling multiple checkboxes by passing data attributes -

checkbox - Jquery selection and disabling multiple checkboxes by passing data attributes -

i trying dynamic checkbox selection going. actual code retrieves values database create id's hardcored values question.

if select section 1, cat 1 , sub cat 1 should checked. if select cat 1, sub cat 1 should checked.

i seem missing somewhere 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

you need alter lastly 2 if() conditions.

in case of cat need info attribute section_list , not section_sub_list. section not have attribute - section_sub_list

in case of subcat need info attribute cat_id , not sub_cat_id. cat 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); } }); });

jquery checkbox