Radio button attribute set to checked doesn't update UI

[Aaron <spyhunter66@…>]

Upgraded from 1.4.4 to 1.7.1 and this piece of code no longer works properly:

selectedProfile.SaveEmail ? $('#remEmailProfile').attr('checked', true) : $('#remEmailProfile').removeAttr('checked'); If my JSON value is set to true, it does add an attribute "checked"="checked" to the proper radio button in the html. However, the browser does not show the radio button as checked.

I tried using .prop("checked", true), but it doesn't appear to do anything.

[Aaron <spyhunter66@…>]

I narrowed it down more - it does work properly until a subsequent command is send to remove the checked attribute on a different radio button.

Here's a jFiddle:  http://jsfiddle.net/H453F/1/

[sindresorhus]

Even though you should use .prop() to set the checked state, the .attr()method also works:  http://jsfiddle.net/mofle/H453F/3/

Your testcase is set to using MooTools by the way, so no wonder why it's not working.

[Aaron <spyhunter66@…>]

I'm sorry, I fixed my jsFiddle and the issue persists.

It also is shown on your example as well - the key issue is that any .removeAttr('checked') from 1 radio button appears to remove them from ALL.

But if you inspect the html, you'll see the checked=checked attribute is still in place, it's just not reflecting on the browser.

See my update:  http://jsfiddle.net/H453F/5/

[anonymous]

Both .removeAttr and .removeProp (at least on jQuery 1.7.x) will not simply uncheck the selected radio button. The solution is to use .prop('checked', false) instead.

 http://jsfiddle.net/wEC3t/