Can't select or deselect checkboxes inside jQuery UI Modal Dialog

Question

I'm using jQuery UI's dialog to show some options, each represented as checkbox. Now when I'm opening dialog, and clicking on checkboxes, nothing happens, checkbox doesn't get checked.I'm using jQuery UI's latest version.

Can anybody tell me what's wrong ?

Here's the code

$('div#attachedDocuments').dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        title: "Select files",
        buttons: {
            "Ok": function () {
                    $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

And this is the dialog

<div id="attachedDocuments">
    <asp:Repeater ID="rptAttachments" runat="server"
                  OnItemDataBound="AttachedDocumentsDataBound">
        <ItemTemplate>
            <asp:CheckBox ID="checkBoxDocument" runat="server" />
        </ItemTemplate>
    </asp:Repeater>    
</div>

Answer 1

I've had a similar issue. Here is what I thought was going on: jQueryUI will assign a z-index to the dialog when you call .dialog(). If you add more elements to the page after that, your dialog (or its contents) might become underneath something else (even something invisible). But then I saw this bug report, so I'm not sure about the cause anymore...

The solution: give your dialog a really high z-index on your CSS file, something like 99999.