jQuery: changes are not displaying in html? Use prop(), end() and change()

Problem:

Some time it happens like we use jQuery to machine some changes (set value, change attribute value, selected index change, checkbox/radio-button check change) on page, and those changes do not reflect on screen. If you inspect/check those elements using developer tools (firebug, IE Developer toolbar, Chrome developer tools etc), you’ll find that value is perfectly assigned to the element. But still changes do not display on the screen.

Solution:

Do not use .attr(‘attribute’,’value’) to set some attribute value. Use prop and end instead and call the change function to display value.

Correct but not displaying value on page:

      $('#checkbox_id').attr('checked', true);

Correct and displaying value on page:

        $('#checkbox_id').prop('checked', true).end().change();