Disabling checkboxes in Jquery when Any checkbox is clicked

I have the following series of checkboxes on my page:

$("#chkLoc0").click(function() {
  $('[id^=chkLoc]:not(#chkLoc0)').prop('checked', $(this).prop('checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="form-group row" id="Location">
  <div class="col">
    <label class="checkbox-inline">
 <input  type="checkbox" id="chkLoc0" name="Locations[0].SelectedSection" value="1"  />
  Any  <br />
 </label>
    <label class="checkbox-inline">
 <input  type="checkbox" id="chkLoc1" name="Locations[0].SelectedSection" value="2"  />
  Test1  <br />
 </label>
    <label class="checkbox-inline">
 <input  type="checkbox" id="chkLoc2" name="Locations[0].SelectedSection" value="3"  />
  Test2  <br />
 </label>
    <label class="checkbox-inline">
 <input  type="checkbox" id="chkLoc3" name="Locations[0].SelectedSection" value="4"  />
  Test3  <br />
 </label>
    <label class="checkbox-inline">
 <input  type="checkbox" id="chkLoc4" name="Locations[0].SelectedSection" value="5"  />
  Test4  <br />
 </label>
  </div>

If the user checks "Any" box then I want the rest of the boxes to be checked and also rest of the check boxes to be disabled. This is what I have to check rest of the checkboxes if "Any" is clicked and it works.

 $("#chkLoc0").click(function () {
       $('[id^=chkLoc]:not(#chkLoc0)').prop('checked', $(this).prop('checked'));
   });

I tried to write the below code to disable rest of the check boxes if "Any" is clicked and it is not working. This is what i have:

  $("#chkLoc0").click(function () {
       $('[id^=chkLoc]:not(#chkLoc0)').prop('disabled', $(this).prop('disabled'));
   });

How can I disable all the checkboxes when "Any" check box is clicked. I am just trying that if "Any" check box is clicked then all the checkboxes stay clicked. I don't want the user to click on "Any" checkbox and then uncheck few checkboxes like "Test1" and "Test2". I want to make sure that if "Any" is clicked then "Test1", "Test2", "Test3", "Test4" stay clicked. Sometimes user clicks "Any" check box and then uncheck one or two checkboxes. I want to disable "Test1", "Test2", "Test3", "Test4" so that they stay clicked.

Solution

The accepted answer to me is just something that works but IMO not the best approach. First of all, I would strongly advise to stop using jQuery and switch to regular JS.

Even though your project is already using jQuery, it might not a bad idea to start using regular JS so that you can switch once all jQuery is away.

This answer provides a more logic approach. (IMO)

When 'ALL' is selected, select all and vice versa
When a checkbox is removed from the all selection, also deselect All (and yes also vice versa)

// Checkboxes aren't dynamic, so retrieve them once
const checkboxes = document.querySelectorAll(".checkbox-inline input");
const allButton = document.querySelector("#chkLoc0");
const checkboxesExceptAll = [...checkboxes].filter(cb => cb !== allButton);

// When the "All" checkbox is changed, apply its state to all others
allButton.addEventListener("change", () => {
  checkboxes.forEach(checkbox => {
    checkbox.checked = allButton.checked;
  });
});

// Add change listener to each checkbox except the "All" checkbox
checkboxesExceptAll.forEach(checkbox => {
    checkbox.addEventListener("change", () => {
      // If any individual checkbox is unchecked, uncheck the "All" checkbox
      if (checkboxesExceptAll.every(cb => cb.checked)) {
        allButton.checked = true;
      } else {
        allButton.checked = false;
      }
    });
});

<div class="form-group row" id="Location">
 <div class="col">
   <label class="checkbox-inline">
     <input type="checkbox" id="chkLoc0" name="Locations[0].SelectedSection" value="1" /> All <br />
   </label>
   <label class="checkbox-inline">
     <input type="checkbox" class="checkbox" id="chkLoc1" name="Locations[0].SelectedSection" value="2" /> Test1 <br />
   </label>
   <label class="checkbox-inline">
     <input type="checkbox" class="checkbox" id="chkLoc2" name="Locations[0].SelectedSection" value="3" /> Test2 <br />
   </label>
   <label class="checkbox-inline">
     <input type="checkbox" class="checkbox" id="chkLoc3" name="Locations[0].SelectedSection" value="4" /> Test3 <br />
   </label>
   <label class="checkbox-inline">
     <input type="checkbox" class="checkbox" id="chkLoc4" name="Locations[0].SelectedSection" value="5" /> Test4 <br />
   </label>
 </div>