Changing check attribute of jquery dom items in a variable array

Question

Ok, So I have a list of checkboxes in a pop up. I grab two lists of jquery dom elements, a list of the checkboxes and a list of the checkboxes that are checked. The idea is that the user can change the checkboxes then if they want to, press a cancel button and it will revert to the original.

I get the two lists...

var allDropDownCheckboxes = $(this).next().find(".dropDownCheckbox");
var selectedCheckboxes = $(this).next().find(".dropDownCheckbox:checked");

On the cancel button being pressed I revert the checkboxes to their original state...

allDropDownCheckboxes.attr('checked', false);
selectedCheckboxes.attr('checked', true);

It unchecks them all but doesn't check the ones that were originally checked again...

Why?!

Thanks

Answer 1

Try to use .prop() instead of .attr() to set the checked state of form elements, from the docs:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

allDropDownCheckboxes.prop('checked', false);
selectedCheckboxes.prop('checked', true);

Answer 2

try to use .prop() instead of .attr()

allDropDownCheckboxes.prop('checked', false);
selectedCheckboxes.prop('checked', true);