jQuery UI Dialog, Checkboxes and the mysterious case of IE6

Question

I have a jQuery UI Dialog containing some checkboxes. I want to conditionally set the state of these checkboxes and then open the dialog.

Unfortunately this causes problems in IE6. The checkbox is never checked if it's value is set before opening the dialog.

For example in the following code "Dialog Checkbox 1" is never checked in IE6, but is in every other browser.

[Update] The problem is with how IE6 resets the state of any checkbox that is appended anywhere. And when the Dialog is opened, jQuery UI appends it to the top of the body. Apparently "it's a known fact that when working with IE, the checked state of checkboxes lose their state when they are appended [anywhere]" (see link below)

This jQuery forum post suggests some resolution but is concerned with changing the jQuery UI code; something that I'd rather not do if at all possible.

Are there any solutions to this?

Thanks,

D.

Code:

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').dialog({
        autoOpen : false,
        modal : true
    });

    $("a#openDialog").click(function() {
        $("#formContainer .check1").attr("checked", true);
        $('#dialog').dialog('open');
        $("#formContainer .check2").attr("checked", true);
    });
});
</script>

<h1>jQuery Dialog/Checkbox Test</h1>
<a href="#" id="openDialog">Open Dialog</a>
<div id="dialog">
    <form>
        <div id="formContainer">
            Dialog Checkbox 1: <input type="checkbox" value="blue" class="check1"/>
            Dialog Checkbox 2: <input type="checkbox" value="red" class="check2"/>
        </div>
    </form>
</div>

Answer 1

give different id to the check boxes and try call chek function using id.

if checkbox 1 having id = check1

$("#check1").attr("checked", true);

Give a try

Answer 2

Always loathe to answer my own question but I've found a workaround that someone else will find useful if they hit this.

Use the "defaultChecked" attribute instead of "checked" when setting before opening the dialog. Eg:

$("a#openDialog").click(function() {
    $("#formContainer .check1").attr("defaultChecked", true);
    $('#dialog').dialog('open');
    $("#formContainer .check2").attr("checked", true);
});

Note that "defaultChecked" after the open will not check it. Probably safer just to use both if the code may move.