radio Buttons and .attr('checked','checked') does NOT work in IE7

Question

Is there any way to get radio buttons checked upon appending in IE7?

What seems to work in every browser, doesn't look like it works in IE6,7 despite reading everywhere that I'm doing it correctly. I have absolutely no idea why it's not working.

var $itemVariantRowRadio = $("<input/>")
    .attr("type", "radio")
    .attr("name", "itemvariant")
    .addClass("itemvariant")
    .val('whatever');


    $itemVariantRowRadio.attr('checked', 'checked');
    $itemVariantRow.append($itemVariantRowRadio)

Now if I do a console.log($itemVariantRowRadio.attr('checked') in IE6/7 then it says that it's set to TRUE but the radio doesn't actually get checked or pick up as checked.

Nightmare! Anyone else come across this and have any sort of fix?

Answer 1

If in jQuery >= 1.6:

Use prop as seen here: .prop() vs .attr()

$itemVariantRowRadio.prop('checked', true);

---

If in jQuery < 1.6:

$itemVariantRowRadio.attr('checked', true);

---

ALSO:

Try creating your element like so:

var $itemVariantRowRadio = $("<input/>",{
     type: 'radio',
     name: 'itemvariant',
     class: 'itemvariant',
     checked: true,
     value: 'whatever'
});
$itemVariantRow.append($itemVariantRowRadio);

See fiddle: http://jsfiddle.net/maniator/6CDf3/
An example with 2 inputs appended: http://jsfiddle.net/maniator/6CDf3/2/