Toggling of radio button only works once (refresh)?

Question

I am trying to toggle a radio box selection included in cells table.

The toggling works only once per radio button.

After, all radio buttons are disabled but my HTML code seems to be correct; the attribute checked="checked" is present.

Why is this not working?

Here is the jQuery I am using:

$('td').click(function(){
    var $elem = $(this).children('input');               
    var name = $elem.attr('name');
    $('input[name='+name+']').each(function(){
       $(this).removeAttr('checked');                  
    }).promise().done(function(){                 
       $elem.attr('checked','checked');               
    });
}); 

And the image:

Answer 1

You need to be using prop() as currently you are actually removing the attribute using removeAttr() instead of just setting it to disabled.

The following will work:

$('input[name='+name+']').each(function(){
   $(this).prop('checked', false);                  
}).promise().done(function(){                 
   $elem.prop('checked', true);               
});