Laravel 活跃的复选框父亲和 child

Question

当我激活复选框父

时，我绑定到激活child复选框

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

我只想要如果我点击复选框父亲，所有 children 复选框激活或禁用。

我的问题是当复选框父亲处于活动状态时如何激活复选框 children？以及当父亲被禁用或不活动时如何禁用复选框 children？我正在使用 ajax 来处理它，但这对我不起作用，为什么？？？

Answer 1

这是您的主复选框，您可以将其包装成属性，例如。 $checkAll

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

// in component

public $checkAll = false;

然后对于子复选框，您可以为此添加属性更改以激活或禁用它。

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

Laravel 活跃的复选框父亲和 child

Laravel Active checkbox father and child

javascript

laravel

laravel-livewire