Changing .prop using jQuery does not trigger .change event

Jquery

Jquery 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();

Working Demo

Solution 2 - Jquery

Updated version

.change() is already deprecated

Use .trigger('change') instead

$('input[type="checkbox"][name="something"]').prop("checked", false).trigger('change');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionfuzzybabybunnyView Question on Stackoverflow
Solution 1 - JqueryMilind AnantwarView Answer on Stackoverflow
Solution 2 - JqueryAdrian EnriquezView Answer on Stackoverflow