Changing .prop using jQuery does not trigger .change event
JqueryJquery Problem Overview
I've got an event listener on a checkbox:
<input type="checkbox" name="something">
My event listener:
$('input[type="checkbox"][name="something"]').change(function() {
//DO SOMETHING
});
I have another event listener that changes .prop
of the checkbox:
$('#button').click(function() {
$('input[type="checkbox"][name="something"]').prop("checked", false);
});
When I check the checkbox DO SOMETHING
triggers. When I click on the #button
, the .prop
changes and I see the checkbox visually uncheck, but DO SOMETHING
doesn't get triggered...
Something I'm overlooking?
Jquery Solutions
Solution 1 - Jquery
Change event is fired when the value is changed by users interaction on page and not when value is modified using code.
Here you need to use .change()
or .trigger("change")
after changing the property:
$('input[type="checkbox"][name="something"]').prop("checked", false).change();
Solution 2 - Jquery
Updated version
.change()
is already deprecated
Use .trigger('change')
instead
$('input[type="checkbox"][name="something"]').prop("checked", false).trigger('change');