使用 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 显示它们，我想 select 显示的地址之一。

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

Answer 1

我不确定您为什么尝试使用复选框而不是单选按钮。但也许你可以处理这样的事情

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>

Answer 2

当您有多个选项但想将选择限制为一个选项时，radio buttons 是您的朋友。

如果之前选择的单选按钮没有取消选择，则表明您没有使用 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');
    }
}

组件视图

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

使用 livewire 仅选中一个复选框并取消选中其他复选框

Check only one checkbox and uncheck others using livewire

php

laravel

laravel-livewire