How to update disabled prop on checkbox change?

I have a checkbox that I'm using to toggle whether a li tag gets added to a list. When it is added to the list other li tags and their associated checkboxes (nested under the li tag) are "disabled" using jQuery.

The checkbox will become disabled but it does not un disable when I uncheck the box currently.

I've tried prop, attr, removeProp/Attr which no success in making the checkbox active again.

$('#id_of_ul_that_holds_li's').on('change', li.active input, function() {

    if ($(this).prop('checked')) {
      $(this).parent().addClasss('checked')
      $(this).children('input').prop('disabled', true)
    }
    else if (!($(this).prop('checked')) {
      $(this).parent().removeClasss('checked')
      $(this).children('input').prop('disabled', false)
    }

  });

Solution

As suggested:

$("#id_of_div").on('change', "li.active > input[type='checkbox']", function(e) {
  if ($(this).is(":checked")) {
    $(this).parent().addClasss('checked')
    $(this).prop('disabled', true)
  } else {
    $(this).parent().removeClasss('checked')
    $(this).prop('disabled', false)
  }
});

This will check if the Checkbox Element, this, is checked. See more: