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.

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).

Answer 2

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.

Answer 3

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!