Is there a bug with radio buttons in jQuery 1.9.1?

Question

I've been trying to programatically select radio buttons with jQuery, something I thought would be as simple as changing the checked attribute.

However, the following code doesn't seem to do what is expected in jQuery 1.9.1 in Chrome/Firefox.

Expected behaviour: Click the div enclosing the radio button -> 'checked' attribute gets set -> renders checked in the DOM.

Actual behaviour: Click the div enclosing the radio button -> 'checked' attribute gets set -> renders checked in the DOM for the first and second button clicked, subsequent buttons don't render as checked.

jQuery:

$('div.form-type-radio').on('click', function () {    
    var Id = $(this).find('input[type=radio]').attr('id');   
    $('form input[type=radio]:not(#'+Id+')').removeAttr('checked');   
    $('#' + Id).attr('checked', 'checked');    
    console.log($('#' + Id));    
});

Here's a jsFiddle - http://jsfiddle.net/GL9gC/

I've tried the same code with previous versions of jQuery and it all works as expected.

Answer 1

In this case, you should use prop() instead of attr() / removeAttr() .

Here's a working jsFiddle .

jQuery:

$('div.form-type-radio').on('click', function () {
    var Id = $(this).find('input[type=radio]').prop('id');
    $('form input[type=radio]:not(#'+Id+')').prop('checked');
    $('#' + Id).prop('checked', 'checked');
    console.log($('#' + Id));
});

Answer 2

LIVE DEMO

$('div.form-type-radio').on('click', function () {    
    $(this).find(':radio').prop({checked: true});
});

http://api.jquery.com/prop/