Question

I currently have a jQuery function that disables a Checkboxlist if the Parent Checkbox is unchecked and enables when It is checked. However, the Parent checkbox is defaulted to uncheck, which I want.

This causes a problem for the code because it is enabled on pageload and only disables if you check and uncheck the parent Checkbox.

Anyone know a fix?

$(document).ready(function() {
    $('#cbsys').bind('click', function() {
        var doEnable = ($('#cbsys:checked').length > 0);
        $('#syscbl').each(function() {
            if (doEnable) {
                $(this).attr('disabled', null);
                $(this).parents('label').removeClass('cssDisabled');
            } else {
                $(this).attr('disabled', 'disabled');
                $(this).parents('label').addClass('cssDisabled');
            }
        });
    });
});

Answer 1

Just cache it as a function and run it on document ready as well as on click. I also optimized your code a bit:

function disableCk() {
  var doEnable = $('#cbsys:checked').length; // <-- use a class
  $('#syscbl').each(function() { // <-- use a class
    var $this = $(this);
    if (doEnable) {
      $this.prop('disabled', false)
        .parents('label')
        .removeClass('cssDisabled');
    }
    else {
      $this.prop('disabled', true)
        .parents('label')
        .addClass('cssDisabled');
    }
  });
}

$(document).ready(function() {
  disableCk();
  $('#cbsys').on('click', disableCk);
});

EDIT

Just noticed that you seem to be using multiple ids with same name which is invalid HTML, make sure to use classes instead. I put a comment in the code, take a look above.