Multiple Checkboxes

[dustinfabre]

What seems to be the problem: When i have multiple checkbox, and i click on the checkbox fast enough
the UI some checkboxes unchecked depending on the hydrating.

Steps to Reproduce: create multiple checkboxes with different models, then check each fast

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples: no

is there a way to delay hydrating when there’s still a request pending, just like wire:loading

[shortbrownman]

It may be dependent on how you’re setting up your checkboxes. If you have the same data point represented in multiple checkboxes, that might be the cause of the “jumping around” behavior.

Take a look at this, it might solve your problem:

Checkbox keeps the old values livewire

It’s a bit difficult to determine what the issue is without more of your code’s context. I set up a simple test with a @foreach loop and checkboxes. The checkboxes persisted the data in my example. I’m not sure why you’re setting the value as “answers.{{ $index }}”. That would only serve to convey that the value of the checkbox would be “answers.0”, “answers.1”, etc… If your answers are an associative array that you’re trying to set the value on, you’ll need to do something like value="{{ $answ…

[Dimonka2]

There is an issue with checkboxes and other controls in Livewire, especially if you hiding/unhiding conditionally some of them. My working solution to overcome false checking in browser is using names (not wire:model, but normal name: <input type="checkbox" name="uniqueCheckboxName" ...) alternatively setting IDs works as well. This way browser does not mixing up controls and Livewire also working more stable (no “jumping” ticks).

[dustinfabre]

check boxes are used to filter data, so when i used it on something like filtering for categories i check fast enough before the request is finish. the checkboxes tick and untick depending on the request finish. the data is updated on the backend but on dirty state.

[gus]

I have the same problem. Clicking fast enough you toggle the checkbox in the browser, but then the ajax requests from Livewire come back and the checkboxes get updated by Livewire. The user sees checkboxes blinking on and off.

It would help if we could wait for one Livewire sync request finishes before firing another.

Edit: Apparently this will come in the “next major version” with wire:model.defer, according to the Github roadmap.

[Dimonka2]

I found a pretty stable way how to render checkboxes without having unexpected checks/unchecks:

<input type="checkbox" autocomplete="off" wire:model="selected.32871" id="rF0xfuW6cYdNrwXOBHem_32871">

The checkbox id is a composite of component ID and element ID and it works pretty stable. I am using it for row selecting in a table and switching between pages and going back to previous selection works without any problem. At least in Chrome/Firefox.