Michael Michael - 2 years ago 195
jQuery Question

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

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

autoOpen: false,
height: 300,
width: 350,
modal: true,
title: "Select files",
buttons: {
"Ok": function () {
Cancel: function () {

And this is the dialog

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download