Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ad45's avatar
Level 1

wire:model not updating on input change made by javascript

I have 2 checkboxes, called 'Yes' and 'No'

I want to have it so when one is checked, the other is not, which is achieved with the simple script below.

However, changing the checkboxes in this way makes it so the changes cannot be tracked by wire:model, even after I dispatch an Input Event. How do I resolve this?

yes_checkbox.addEventListener('change', function () {
  	if (this.checked) {
		no_checkbox.checked = false;
		no_checkbox.dispatchEvent(new Event('input'));
	}
	
});

no_checkbox.addEventListener('change', function () {
	if (this.checked) {
		yes_checkbox.checked = false;
		yes_checkbox.dispatchEvent(new Event('input'));
	}
});
0 likes
2 replies
Snapey's avatar

so you have managed to recreate radio buttons?

your event listeners are probaby wiped when a dom refresh occurs. You could wire:ignore the checkboxes and send the update to livewire with an event

ad45's avatar
Level 1

@Snapey haha, that is my mistake, I'm new to web development, so unaware of existing html elements.

But out of curiosity, I'm still confused as to why wire:model doesn't track the checkboxes properly even after I emit an Input event signaling to Livewire that its state has changed.

I don't think it's a Dom refreshing issue, as the page literally consists of a form object with wire:model attached to each input element.

(I don't even want anything crazy, like real-time validation/input tracking, just references to the form values so I can perform validation on form submission)

Please or to participate in this conversation.