Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

159
Vistas
Laravel Active checkbox father and child

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

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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"
            >
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda