Estoy tratando de marcar solo una casilla de verificación a la vez y otras desmarcadas, pero cuando quiero marcar una nueva casilla de verificación, la anterior se desmarcará, y así sucesivamente.
mi codigo en blade:
@foreach($addressEmployer as $address) <div class="col-12 col-lg-3 p-2 m-2 rounded" style="border: dashed #a1a1a1;"> <label for="check{{$address->id}}"></label> <div class="row"> <div class="col-2 mt-5"> <input wire:model="addressSelected.{{$address->id}}" value="{{$address->id}}" class="form-check-input" type="checkbox" id="check{{$address->id}}"> </div> <div class="col-10"> <p> {{$address->province->name}} - {{$address->city->name}}</p> <p> {{$address->address}}</p> <a wire:click="setAddress({{$address->id}})" class="float-end" data-bs-toggle="modal" href="#editAddressModal" role="button">{{__('Edit')}}</a> <a wire:click="$emit('addressId',{{$address->id}})" class=" me-3 float-end" data-bs-toggle="modal" href="#deleteAddressModal" role="button">{{__('Delete')}}</a> </div> </div> </div> @endforeachLeo las direcciones de la base de datos y las muestro con foreach y quiero seleccionar una de las direcciones mostradas.
Estoy buscando la solución correcta a este problema. Gracias si tienes una solución.
Cuando tiene múltiples opciones pero quiere limitar la selección a una sola opción, los botones de radio son su amigo.
Si el botón de radio seleccionado previamente no se deselecciona, sugiere que no ha agrupado los elementos de su botón de radio correctamente usando el atributo de name .
Aquí hay un ejemplo simplificado para llevarlo por el camino correcto.
Componente
class AddressComponent extends Component { public $addresses = Address::all(); public $selectedAddressId; public function mount() { $this->addresses = Address::all(); $this->selectedAddressId = 1; } public function render() { return view('livewire.address-component-view'); } }Vista de componentes
<div> @foreach ($addresses as $address) <div class="mt-1"> <input type="radio" id="{{ $address->id }}" name="address" value="{{ $address->id }}" wire:model="selectedAddressId" /> <label for="{{ $address->id }}">{{ $address->address }}</label> </div> @endforeach <h3>Selected Address ID: {{ $selectedAddressId }}</h3> </div>No estoy seguro de por qué estás intentando esto con una casilla de verificación, en lugar de un botón de opción. Pero tal vez puedas manejar algo como esto.
public $addressSelected = []; protected $rules = [ 'addressSelected.id' => 'nullable' ]; public function updatingAddressSelected($value) { $this->addressSelected = []; } // in blade add the wire:key directive to checkbox's root div <div class="col-2 mt-5" wire:key="checkbox-id-{{ $address->id }}"> <input wire:model="addressSelected.{{$address->id}}" value="{{$address->id}}" class="form-check-input" type="checkbox" id="check{{$address->id}}" @if(in_array($address->id,$addressSelected)) checked @endif > </div>