Estoy atando a la casilla de verificación del niño activo cuando activo la casilla de verificación del padre

 <table class="table table-report mt-2"> <!-- checkbox father --> <div class="grid grid-cols-5"> <div wire:loading.class="pointer-events-none" class="text-center tooltip" tooltip="{{ __('Pay to All') }}"> <p> <strong> {{ __('Active All') }} </strong> </p> <input wire:loading.attr="disabled" id="active_all" type="checkbox" class="input input--switch " > </div> </div> <thead> <tr> <th class="text-center">{{ __('Pay Wage') }}</th> </tr> </thead> <tbody> <!-- checkbox children --> @foreach($this->workers as $key => $worker) <tr class="intro-x" wire:key="worker-{{ $worker->id }}"> <td wire:loading.class="pointer-events-none" class="text-center tooltip" tooltip="{{ __('Pay to Worker') }}"> <input wire:loading.attr="disabled" id="input-wagesheet-worker-{{ $worker->id }}" name="select-check" wire:change="changeIsWagesheetWorker({{ $worker->id }})" @if(isset($worker->wagesheet->id)) checked @endif type="checkbox" class="input input--switch checar" > </td> </tr> @endforeach </tbody> </table>

guión de sección

 @section('script') <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> $('#active_all').change(function() { console.log(this.active_all.value); if ($(this).prop('checked')) { $('.checar').prop('checked', true); } else { $('.checar').prop('checked', false); } }); </script> @endsection

Lo único que quiero es si hago clic en la casilla de verificación padre, todos los niños casilla de verificación activa o deshabilitada.

Mi pregunta es ¿Cómo puedo activar casillas de verificación para niños cuando la casilla de verificación padre está activa? y ¿Cómo puedo deshabilitar la casilla de verificación de los niños cuando el padre está deshabilitado o inactivo? Estoy usando ajax para trabajarlo, pero esto no me funciona, ¿por qué?