Clearing checkboxes in Livewire

I encountered an issue where checkboxes are not cleared when the array they are bound to is cleared.
Checkbox input elements like this;
1
<input wire:model="recipients.{{ $contact->id }}" 
2
    type="checkbox" 
3
    name="recipient-{{ $contact->id }}" 
4
    id="recipient-{{ $contact->id }}"
5
>
Copied!
the array of recipients uses dotted notation to specify the index
Recipients are contacts in the system and are output as an array for the user to select a number of recipients and then perform the action.  As each recipient is checked a key/value pair is added to the array.
1
array:2 [
2
  42 => true
3
  34 => true
4
]
Copied!
Checkboxes that have not been selected are not present in the array. Selecting then deselecting a checkbox causes its entry to be set false;
1
array:2 [
2
  42 => false
3
  34 => true
4
]
Copied!
Once the user has selected a number of recipients and then performed the activity, the checkboxes should be cleared.  Setting the $recipients to an empty array does nothing to the view. The previously checked checkboxes are still checked following render.
The solution to clear the checkboxes is to iterate through the array in the Livewire component, setting recipients to false;
1
foreach($this->recipients as &$recipient) {
2
    $recipient = false;
3
}
Copied!
note the use of & to pass the array entry by reference.

Livewire - Previous

SweetAlert2 with Livewire

Next - Livewire

Livewire File Uploads Using S3

Last modified 1yr ago

Copy link