Checkbox manual grouping

by Annie Lagang

HTML

<table border="1">
<tbody>
    <tr class="checkboxgroup">
		<td>
             <mgwk3b_voucher0 id="MGWK3B_Voucher0"><input id="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_MGWK3B_Voucher0" type="checkbox" name="ControlGroupCustomerTravelVoucherView$CustomerTravelVoucherView2$MGWK3B_Voucher0"><label for="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_MGWK3B_Voucher0">12801591685100001</label></mgwk3b_voucher0>
<br />
                <mgwk3b_voucher1 id="MGWK3B_Voucher1"><input id="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_MGWK3B_Voucher1" type="checkbox" name="ControlGroupCustomerTravelVoucherView$CustomerTravelVoucherView2$MGWK3B_Voucher1"><label for="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_MGWK3B_Voucher1">12801600414700001</label></mgwk3b_voucher1><br />
  <mgwk3b_voucher2 id="MGWK3B_Voucher2"><input id="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_MGWK3B_Voucher2" type="checkbox" name="ControlGroupCustomerTravelVoucherView$CustomerTravelVoucherView2$MGWK3B_Voucher2"><label for="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_MGWK3B_Voucher2">12801615433700001</label></mgwk3b_voucher2><br />
    </td>
    </tr>
    <tr class="checkboxgroup">
		<td>
		   <hg1r4r_voucher0 id="HG1R4R_Voucher0"><input id="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_HG1R4R_Voucher0" type="checkbox" name="ControlGroupCustomerTravelVoucherView$CustomerTravelVoucherView2$HG1R4R_Voucher0" class="disabledGroups"><label for="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_HG1R4R_Voucher0" >12801567472600001</label></hg1r4r_voucher0>
<br />
		   <hg1r4r_voucher1 id="HG1R4R_Voucher1"><input id="ControlGroupCustomerTravelVoucherView_CustomerTravelVoucherView2_HG1R4R_Voucher1" type="checkbox" name="ControlGroupCustomerTravelVoucherView$CustomerTravelVoucherView2$HG1R4R_Voucher1" class="disabledGroups"><label...

JavaScript

$(function(){
    
    // disable all checkboxes whose id doesn't have MGWK3B
    //var reloc = "MGWK3B";
    //$(".checkboxgroup").find("input[type='checkbox']").not("[id*=" + reloc + "]").prop("disabled", true);
    
    $("input[type='checkbox']").change(function(){
            var checkbox = $(this);
            if (checkbox.is(':checked')) {
                var id = checkbox.attr("id");
                var reloc = id.split('_')[2]; 
                $(".checkboxgroup").find("input[type='checkbox']").not("[id*=" + reloc + "]").prop("disabled", true);
            } 
            else
            {
                if($("input[type='checkbox']").filter(':checked').length === 0)
                {
                    $('table input[type=checkbox]').attr('disabled',false);
                }
            }            
    });
})

/*
    1. Get selected group reloc.
    2. Get all checkbox, filter out those with the from the selected reloc group and add class to all.
    3. Disable checkboxes with newly added class.
    
    MAJOR PROBLEM:
    If all checkboxes are unchecked, enable the other checkboxes.
    
    Requirements for this to work:
    1. All tr must have .checkboxgroup class.
    2. Checkbox IDs must be in this format: namespace_reloc_Voucher0
*/