building jquery checkbox - can't set checked value

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

Wha开发者_如何学编程t 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.

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

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!

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.

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.