php - 使用 Livewire 仅选中一个复选框并取消选中其他复选框

Question

我尝试一次仅选中一个复选框，然后取消选中其他复选框，但当我想选中一个新复选框时，前一个复选框将取消选中，依此类推。

我在 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

我从数据库中读取地址并使用 foreach 显示它们，我想选择显示的地址之一。

我正在寻找解决此问题的正确方法。如果您有解决方案，谢谢。

Answer 1

当您有多个选项但希望将选择限制为单个选项时，radio buttons是你的 friend 。

如果之前选择的单选按钮没有取消选择，则表明您没有使用 name 属性对单选按钮元素进行正确分组。

这是一个简化的示例，可帮助您走上正确的道路。

组件

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');
    }
}

组件 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>