Check only one checkbox and uncheck others using livewire - php

Question

I'm trying to check only one checkbox at a time and others uncheck, but when I want to check a new checkbox then the previous will uncheck, and so on.
my code in 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>
#endforeach
I read the addresses from the database and display them with foreach and I want to select one of the displayed addresses.
I am looking for the right solution to this issue. Thanks if you have a solution.

Answer 1

When you have multiple options but want to limit selection to a single option, radio buttons are your friend.
If the previously selected radio button is not de-selecting, it suggests you haven't grouped your radio button elements correctly using the name attribute.
Here is a simplified example to get you on the right path.
Component
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');
}
}
Component view
<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>

Answer 2

I'm not shure why you're trying this with checkbox, instead of radiobutton. But maybe you can handle something like this
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>