Check only one checkbox and uncheck others using livewire

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>