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?
