Checking Any checkbox is causing all the individual checkboxes to be unresponsive

I have the following checkboxes on my web page:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<input type="checkbox" onclick="ValueAnyDisable()" id="Chk0" name="Test1" value="1"  />
Any  <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk1" name="Test1" value="12"  />
BMW <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk2" name="Test1" value="11"  />
FIAT <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk3" name="Test1" value="13"  />
Tesla  <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk4" name="Test1" value="54"  />
Toyota <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk5" name="Test1" value="44"  />
Ford <br />

<!-- end snippet -->

If someone checks the "Any" check box then I want all the other checkboxes to be checked too. If someone unchecks the "Any" checkbox then I want other checkboxes to be unselected.
This is what I tried to write in order to achieve this:

 function ValueAnyDisable()
        {
            const otherCheckboxes = $('[id^=Chk]:not(#Chk0)');
            if ($('#Chk0').is(':checked'))
                otherCheckboxes.prop('checked', true);
            else
                otherCheckboxes.prop('checked', false);

        }

the above code checks all the checkboxes when "Any" is checked and uncheck all the checkboxes when "Any" is unchecked, but after I uncheck the "Any" checkbox, I cannot individually check any check box. All other checkboxes become unresponsive. I am creating these checkboxes in a loop and the value is coming from the database so I can only put one onclick event for all the checkboxes. The above check boxes is the rendered HTML.

In your function ValueAnyDisable, you are setting check or uncheck of all the checkboxes depending on whether Chk0 is checked or not. There is no individual "life" for other checkboxes. By calling this same function onclick of all other checkboxes, in a way, you have restricted all other checkboxes to the value of Chk0.

Since you just need to listen for check of Chk0 for this particular functionality, you can run a click function just for on Chk0, and set values of other checkboxes true or false depending on the value of Chk0. And since this function will be only called on Chk0, other checkboxes will not be restricted of their individual check actions.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="Chk0" name="Test1" value="1"  />
Any  <br />
<input type="checkbox" id="Chk1" name="Test1" value="12"  />
BMW <br />
<input type="checkbox" id="Chk2" name="Test1" value="11"  />
FIAT <br />
<input type="checkbox" id="Chk3" name="Test1" value="13"  />
Tesla  <br />
<input type="checkbox" id="Chk4" name="Test1" value="54"  />
Toyota <br />
<input type="checkbox" id="Chk5" name="Test1" value="44"  />
Ford <br />

<!-- end snippet -->

First you have to remove the onclick event from another input checkbox so your HTML will be look like:

<input type="checkbox" onclick="ValueAnyDisable()" id="Chk0" name="Test1" value="1" />Any  <br/>
<input type="checkbox" id="Chk1" name="Test1" value="12"  />BMW <br/>
<input type="checkbox" id="Chk2" name="Test1" value="11"  />FIAT <br/>
<input type="checkbox" id="Chk3" name="Test1" value="13"  />Tesla <br/>
<input type="checkbox" id="Chk4" name="Test1" value="54"  />Toyota <br/>
<input type="checkbox" id="Chk5" name="Test1" value="44"  />Ford <br/>

and your function should be:

function ValueAnyDisable()
    {   
        if ($('#Chk0').is(':checked')) {
                $('input').prop('checked', true);
            } else {
                $('input').prop('checked', false);
            }
    }

You can also do it with ID selector.
You can remove onclik ="ValueAnyDisable()" :

<input type="checkbox" id="Chk0" name="Test1" value="1" />Any  <br/>
<input type="checkbox" id="Chk1" name="Test1" value="12"  />BMW <br/>
<input type="checkbox" id="Chk2" name="Test1" value="11"  />FIAT <br/>
<input type="checkbox" id="Chk3" name="Test1" value="13"  />Tesla <br/>
<input type="checkbox" id="Chk4" name="Test1" value="54"  />Toyota <br/>
<input type="checkbox" id="Chk5" name="Test1" value="44"  />Ford <br/>

and your JQuery event change to :

$(document).ready(function(){
	$('#Chk0').click(function() {
		if ($(this).is(':checked')) {
			$('input').prop('checked', true);
		} else {
			$('input').prop('checked', false);
		}
	});  
});

Improved your html a bit by adding a <label> tag. And created a minimal function for checkboxes change event:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on('change', '[name="Test1"]', function() {
  const anyCheckbox = $('#Chk0');
  const checkboxes = $('[name="Test1"]').not(anyCheckbox);
  if ( $(this).is(anyCheckbox) ) {
    if ( $(this).prop('checked') ) {
      checkboxes.prop('checked', true);
    } else {
      checkboxes.prop('checked', false);
    }
  } else {
    if ( $('[name="Test1"]:checked').not(anyCheckbox).length === checkboxes.length ) {
      anyCheckbox.prop('checked', true);
    } else {
      anyCheckbox.prop('checked', false);
    }
  }
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="Chk0" name="Test1" value="1">
<label for="Chk0">Any</label>
<br>
<input type="checkbox" id="Chk1" name="Test1" value="12">
<label for="Chk1">BMW</label>
<br>
<input type="checkbox" id="Chk2" name="Test1" value="11">
<label for="">FIAT</label>
<br>
<input type="checkbox" id="Chk3" name="Test1" value="13">
<label for="Chk2">Tesla</label>
<br>
<input type="checkbox" id="Chk4" name="Test1" value="54">
<label for="Chk4">Toyota</label>
<br>
<input type="checkbox" id="Chk5" name="Test1" value="44">
<label for="Chk5">Ford</label>

<!-- end snippet -->