appendTo loses checked state on IE
I working on a jQuery UI dialog box that contains a few checkboxes in
an ASP.Net application that needs all of its contents inside the form
required by the ASP.Net framework. Inside the dialog button handler I
move the form elements back to the form before submitting it.
Unfortunately, the checkboxes revert back to their initial (unchecked)
state. This is only a problem for IE 6 (I don't have access to 7 or
8).
Here's a reduced test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
div, form { width:10em; margin: 2em; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#foo").click(function() { $("#foo").appendTo
("#form1");
});
});
</script>
</head>
<body>
<div id="div1" style="border:thin solid #333333;">
Dialog
<input type="checkbox" id="foo" />
</div>
<form id="form1" style="border:thin solid #ff0000">
Form 1
</form>
</body>
</html>
This thread talks about the same problem, <http://www.nabble.com/
retaining-checkbox-state-in-IE-td6778512s27240.html> but that was
nearly three years ago and I found no discussion of this problem here
on the developer list. Is there a fix better than the one Todd Menier
proposed?