building jquery checkbox - can't set checked value

Question

this seems straightforward enough, I don't know if it's a bug, or just something I'm doing wrong.

What I want to do is build a checkbox input in jquery, then return the string of the input. I have this code:

var obj = $('<input>');
obj.attr('disabled', 'disabled');
obj.attr('type', 'checkbox');
obj.attr('checked', 'checked'); // this does not work!

no matter how i try to render this obj, the 'checked' attribute never gets outputted.

So I have tried:

$('<div>').append(obj).remove().html();

and it returns:

<input type="checkbox" disabled="disabled" />

I have tried setting an id attribute, it makes no difference. I have also tried this but it doesn't work:

obj.attr('checked', true);

Any suggestions on how to get the input tag rendered with the checked attribute set to 'checked' (via jquery)?

I realise I can just do this with string concatenation, but now I really want to know why it's not working the way it should.

EDIT

You can try this for yourself in firebug. Create the obj either my way or cletus' way, then try to render it to a string. You'll find that the 'checked' attribute never gets rendered.

• Ganesh Shankar: obj.attr('checked', true); Should work... Maybe it's your selector which is causing trouble. Can you test your selector in Firebug and see if it returns anything?
• dclowd9901: It doesn't work. Nothing is added to the HTML. Very strange. Have you submitted a bug report to jq?
• benpage: haven't submitted a bug - will do so now!

Answer 1

This works for me:

$("<input>").attr({
 type: "checkbox",
 disabled: true,
 checked: true
}).appendTo("body");

Tested in FF 3.6, Chrome 4 and IE 8 (compat).

• benpage: yes but i don't want to append it to the body. I want to return a string '<input type="checkbox" disabled="disabled" checked="checked">'... try your code in firebug without the .appendTo("body"), and try to get the html rendered.
• cletus: @benpage just curious: why do you want the string?
• cletus: @benpage you're quite right. I've just been playing with this. Very weird.

Answer 2

You are correct there is some weirdness with the "checked" attribute. It seems that it takes effect only after it is actually rendered by the browser. (And not while just in a fragment.)

For example, using your code,

var obj = $('<input />');
obj.attr('disabled', 'disabled');
obj.attr('type', 'checkbox');
obj.attr('checked', 'checked');
var wrapper = $('<div />').append(obj);
alert(wrapper.html()); // notice, no checked attr in this string...
$('body').prepend(obj); // but now notice, it IS checked when it's drawn!

I know this isn't really an "answer" per se, but wanted to let you know you're not going nuts. I'd be curious also to know why this is the case.

Best of luck!

Answer 3

The only way I'm aware of that will allow you to return an entire HTML object as a string would be using the outerHTML trick:

jQuery.fn.outerHTML = function () {
 return $('<div>').append(this.eq(0).clone()).html();
};

Then, simply

$("<input>").attr({
 type: "checkbox",
 disabled: true,
 checked: true
}).outerHTML();

Will give you the complete string.

• Ray: Yes, it's wierd, I concur, and I can't answer the 'why', but this method will return an input with checked="checked"
• dclowd9901: Maybe it's an issue with Firebug not hot-rendering the HTML properly. Otherwise, I don't see how jQ could parse out the information.

Answer 4

(削除) Have you tried just

obj.attr('checked');

(削除ここまで)Wasn't trying to be facetious. Just genuinely wanted to know if it did anything for him.

I guess you're right about this. I've just never given it much thought because jQuery has a built-in workaround in the :checked selector, so it's never really been an issue.

• benpage: yes that returns 'true', ie the checked value is set, but it doesn't get rendered to a string..