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

【问题标题】：Check only one checkbox and uncheck others using livewire使用 livewire 仅选中一个复选框并取消选中其他复选框
【发布时间】：2021-12-22 21:07:24
【问题描述】：

我试图一次只选中一个复选框，而其他复选框取消选中，但是当我想选中一个新复选框时，前一个复选框将取消选中，依此类推。

我在刀片中的代码：

@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 显示它们，我想选择显示的地址之一。

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

【问题讨论】：

这就是radio 按钮的工作原理。你不能改用单选按钮吗？
我测试了收音机，它仍然无法工作，当您选择一个并检查下一个时，前一个不会取消选中。

标签： php laravel laravel-livewire

【解决方案1】：

当您有多个选项但想将选择限制为一个选项时，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>

【讨论】：

【解决方案2】：

我不知道您为什么要使用复选框而不是单选按钮来尝试此操作。但也许你可以处理这样的事情

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>

【讨论】：