Laravel Active checkbox father and child

Question

I'm tying to active child checkbox when I active checkbox father

<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>

section script

@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

I just want is if I click on checkbox father, all children checkbox Active or disabled.

My question is How I can active checkbox children when checkBox father is Active? and How I can disabled checkbox children when father is disabled or inactive? I'm using ajax to work it, but this don't work to me, why???

Answer 1

this is your main checkbox, and you can wrap it to a property, eg. $checkAll

<input wire:model="checkAll" wire:loading.attr="disabled" id="active_all" type="checkbox" class="input input--switch">

// in component

public $checkAll = false; 

then for the child checkboxes, you can add for this property change to activate or disable it.

<input          {{ ! $checkAll ? 'disabled' : '' }}
                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"
            >