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?

score 37 · Accepted Answer · edited May 23 '17 at 12:10

37

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/

edited May 23 '17 at 12:10

Community

1
1

answered Jun 21 '11 at 21:33

Naftali

144,921
39
244
303

whoa when was 1.6 released? and now 1.6.1... surely there has to be a better solution. I mean surely this hasn't been broken up until 1.6 :D – creamcheese Jun 21 '11 at 21:35
@Neal - I think this should be `.attr()` in all jQuery versions - these are initial attributes being set before insertion in the DOM. – Alnitak Jun 21 '11 at 21:38
@Dominic, i added a fiddle demo – Naftali Jun 21 '11 at 21:40
@Alnitak -- i did not realize that is what the OP was doing, but no, you should use prop for `checked` even before it is in the dom – Naftali Jun 21 '11 at 21:40
hmm, I may be misinterpreting what the conclusion of http://stackoverflow.com/questions/5885471/jquery-creating-elements-another-attr-vs-prop-question was – Alnitak Jun 21 '11 at 21:46
@Alnitak -- see the end of the solution: `Of course, there are situations where the opposite is true, e.g. when working with "boolean" HTML attributes like checked or disabled. In that case, it would be more robust to set the strongly-typed DOM property instead of creating the less well-defined HTML attribute.` (sorry for putting the whole quote here) -- use `prop` for `checked` is the general summation – Naftali Jun 21 '11 at 21:48
Thanks for the element creating suggestion, it should help me loads. And you've also opened my eyes to fiddle :D – creamcheese Jun 21 '11 at 22:08
@Dominic, no problem ^_^ anytime – Naftali Jun 21 '11 at 22:33

score 4 · Answer 2 · answered Jun 21 '11 at 21:36

Try: $itemVariantRowRadio.not(':checked').click().change();

So you actually click the checkbox just like you would do as a user with the mouse. not(':checked') will get you sure it was not already checked before. And trigger the change event afterwards, as jQuery click does not do that by itself.

score 2 · Answer 3 · answered Jun 21 '11 at 21:41

2

MSIE doesn't allow you to change the type of an input element once it has been created.

See http://bugs.jquery.com/ticket/1536 and http://api.jquery.com/jQuery/#jQuery2

Just create it so:

$('<input type="radio">')

answered Jun 21 '11 at 21:41

Alnitak

334,560
70
407
495

1

This actually seems to fix it :) – creamcheese Jun 21 '11 at 22:10

score 0 · Answer 4 · answered Jun 21 '11 at 21:41

You don't need to trigger the click event if you apply the checked attribute after you append it to the dom: http://jsfiddle.net/XjHUe/2/

<div id='content'></div>
var $itemVariantRowRadio = $("<input/>")
    .attr("type", "radio")
    .attr("name", "itemvariant")
    .addClass("itemvariant")
    .val('whatever');
//$itemVariantRowRadio.attr("checked", true);
$("#content").append($itemVariantRowRadio);
$(".itemvariant").attr('checked',true);

var val = $(".itemvariant").attr("checked");
alert(val);

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

4 Answers4

Linked