jquery 1.6.2 issue using .prop() for checked and disabled

Question

Possible Duplicate:
.prop() vs .attr()

Please take a look at this fiddle:

http://jsfiddle.net/DGzvP/

$("#test").prop({
    checked: true,
    disabled: true
});

$("#result").text($("#container").html());

You will see the output is:

<input disabled="disabled" id="test" type="checkbox"> 

This is in FF 5. Why does it add an attribute for disabled and not for checked? I was hoping it would do both in a consistent way.

EDIT:

I realize now the result is completely different in every browser.

More Results:

IE6/7:

<INPUT id=test disabled type=checkbox CHECKED> 

Chrome 13:

<input id="test" type="checkbox" disabled="">

IE8:

<INPUT id=test disabled type=checkbox> 

Answer 1

The ".prop()" method is all about setting/getting properties on DOM nodes, and not about setting attributes. As such, it doesn't add any attributes. What you're seeing is the behavior of the Firefox 5 "innerHTML" code, and not that of jQuery.

If you want to work with attributes of the HTML or XHTML (or whatever your DOM came from), use ".attr()". For most purposes in JavaScript working with the live DOM, however, you should use ".prop()".

Answer 2

You should use attr instead of prop here.

$("#test").attr({
    checked: true,
    disabled: true
});