Check the checkboxes between divs

I've a set of checkboxes in a form. Like below,

<label><input type="checkbox" id="main-dish-9">Id 9 </label>
<label><input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9 </label>
<label><input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9 </label>
<label><input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9 </label>
<label><input type="checkbox" id="main-dish-12">Id 9 </label>
<label><input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9 </label>
<label><input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9 </label>

When a page loads, only the check boxes with the id main-list is enabled, others are read-only. In this case when I click on the checkbox id starting with main-list, It should make all the checkboxes below it with the id sub-list should be enabled. If someone checked the main-list, then he/she must also select any one checkbox with the id sub-list.

(jQuery)("input[type='checkbox'][id*='main-dish']", context).click(function () {

  (jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
})