Having trouble setting name attribute of radio button element using jQuery on IE7

I am trying to change the name of a set of radio buttons that are created through an ASP.NET repeater control. I tried this jQuery line:

$('#divContainer input:radio[name*=optModalShippingMethodGroup]').attr('name', 'testValue');

but when I look at the markup outputted by the browser the radio buttons still have the .NET-assigned name property. I then isolated the issue in this jsBin script. If I run that script in Firefox and IE8 it behaves as expected and the radio buttons are mutually-exclusive. On IE7 though, both buttons can开发者_运维技巧 be selected at the same time.

Has anyone encountered this issue before and, if so, any advice on how to solve it? Unfortunately ditching support for IE7 isn't an option.

You should use jQuery's .val()-method for values (that is what your example does), but i think what you're trying to do is this:

$('#divContainer input:radio[name*=optModalShippingMethodGroup]').attr('name', 'testValue');

I have resolved this relatively painlessly. What I did was create a custom radio button class that inherits from System.Web.UI.WebControls.RadioButton. Within the Render() method of that class I use HtmlWriter.AddAttribute to add the name attribute with an explicit value defined in the markup to the radio button.