jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div>
<div id="menu">
<p>
Delivery
</p>
<ul id="chkDelivery" class="list-unstyled checkboxlist">
<li><input id="Delivery_0" type="checkbox" name="Delivery" value="Online" />
<label for="Delivery_0">Online</label>
</li>
<li><input id="Delivery_1" type="checkbox" name="Delivery" value="InClass" />
<label for="Delivery_1">In-Class</label></li>
</ul>
<p>
Fees
</p>
<ul id="chkFees" class="list-unstyled checkboxlist">
<li>
<input id="Fees_0" type="checkbox" name="Fees" value="Free" />
<label for="Fees_0">Free</label></li>
<li>
  <input id="Fees_1" type="checkbox" name="Fees" value="Paid" />
<label for="Fees_1">Paid</label>
</li>
</ul>
</div>
<div id="content">
<h2>
Course List
</h2>
<ul id="courselist" class="list-unstyled">
  <li class="course" data-category="Free Online">Free Online Course Title - CRSE-1000</li>
  <li class="course" data-category="Paid Online">Paid Online Course Title - CRSE-1000</li>
  <li class="course" data-category="Paid Online">Paid Online Course Title - CRSE-1000</li>
  <li class="course" data-category="Free Online">Free Online Course Title - CRSE-1000</li>
  <li class="course" data-category="Paid Online">Paid Online Course Title - CRSE-1000</li>
  <li class="course" data-category="Free Online">Free Online Course Title - CRSE-1000</li>
</ul>
</div>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#menu, #content {
  float: left;
}

/* disabled checkbox */
		.checkboxlist input[type='checkbox'].disabled + label {
			color: red;
		}

JavaScript

$('.checkboxlist input[type="checkbox"]').on('change', function () {
			$allCategories = $(".checkboxlist input[type='checkbox']");
			$allCategories.each(function (i, element) {
				var $checkbox = $(element);
				// check if checkbox's value is in any displayed item's data-category tag.
				var val = $checkbox.val();
				if (val !== undefined) {
					console.log(val);
					if ($('#courselist > li').find('[data-category~="' + val + '"]').length == 0) {
						// if equals 0, disable.
						$checkbox.addClass('disabled').attr('disabled', 'disabled');
					}
					else {
						// else, make sure it's enabled.
						$checkbox.removeClass('disabled').attr('disabled', 'false');
					}
				}
			});
		});