[jQuery] jQuery checkbox checked attribute only enters in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
<div class="moz-text-flowed"
style="font-family: -moz-fixed; font-size: 13px;" lang="x-western">
I have the following code (this is a minimized version of the actual
code to demonstrate what is happening). The code inserts form fields
from data contained in an object:
jQuery(document).ready(function() {
var fieldName = "optin";
var attrib = {
"type":"checkbox", "className":"checked",
"checked":"checked", "value":"1", "name":"promo-optin",
"id":"promo-optin"
}
var inputType = attrib.type;
var inputHTML =
(inputType==="select")?"<select></select>":"<input
type='"+inputType+"' />";
inputHTML =
jQuery("<div>"+inputHTML+"</div>").find("input,select").each(function(){
jQuery(this).attr("id",fieldName);
for (x in attrib) {
if (x!=="type") {
jQuery(this).attr(x,attrib[x]);
}
}
}).end().html();
jQuery("body").append(inputHTML);
})
Every attribute in the attrib object is added to the input tag
correctly in IE6. In FF2, Safari, and Chrome, the "checked" attribute
is not added to the tag, and therefore the checkbox is not checked. (I
haven't bothered to check IE7 and FF3 yet) Here is the actual tag from
FF, retrieved via Firebug:
<input type="checkbox" id="promo-optin" class="checked" value="1"
name="promo-optin"/>
Changing the value of "checked" from "checked" to true or "true"
doesn't make a difference, either. How do I get the checked attribute
to add properly?
</div>
</body>
</html>