Trying to run a code snippet in simple html page

I know, it sounds stupid, but I am new to jquery. I have been trying to run below code on a simple html page and I don't get the same results as I am getting by running the code on stack overflow. This code disable all the checkboxes if "Any" checkbox is clicked.

$("#chkLoc0").click(function() {
        $(".checkbox").prop('checked', $(this).prop('checked')).prop('disabled', $(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" 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>

This is what I am trying to run on simple html page and I am not getting the same results as I am getting by running the above code snippet.

 <script>
 $("#chkLoc0").click(function() {
        $(".checkbox").prop('checked', $(this).prop('checked')).prop('disabled', $(this).prop('checked'));
    });
    
    </script>
    <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" 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>

Am I missing any references? any help will be highly appreciated.

Solution

Try $(document).ready() to wrap your jquery code and load it once after the jquery is loaded.

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#chkLoc0").click(function() {
    $(".checkbox")
      .prop('checked', $(this).prop('checked'))
      .prop('disabled', $(this).prop('checked'));
  });
});
</script>
</head>

...

<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" 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>
</div>