Laravel Active 复选框父子答案

【问题标题】：Laravel Active checkbox father and childLaravel Active 复选框父子
【发布时间】：2021-10-16 01:15:11
【问题描述】：

当我激活复选框父亲时，我正在绑定到活动子复选框

<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

我只想点击父复选框，所有子复选框激活或禁用。

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

【问题讨论】：

标签： javascript laravel laravel-livewire

【解决方案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"
            >

【讨论】：