Checkbox not checkable in dialog ui

Question

I am trying to solve a z-index problem with the jQuery UI Dialog, similar to question Can't select or deselect checkboxes inside jQuery UI Modal Dialog , knowing there is a bug report out there.

So in trying to up the z-index as recommended, I added the following code:

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

where the chrome and firefox console.log states:

Uncaught ReferenceError: Invalid left-hand side in assignment

HOWEVER, despite the error, the checkbox now works (throwing the console error every time). If I remove the offending line, the checkbox becomes "unclickable". How can I properly code this?

My HTML:

<div id="dialog" title="Loading...">
    <p id="interface">Loading...</p>
</div>

(by the way, I tried adding inline style to the <p>, and it didn't work:

<p id="interface" style="z-index:99999">Loading...</p>

And with AJAX, I replace the contents of '#interface' with valid checkbox html such as:

<label for="right">
  <input name="right" type="checkbox">
</label>

and I have the usual jQuery/Dialog UI files included.

One final note, I tried to get creative, since this wasn't working and manually switch the checkbox by:

if ($(evform.target).prop('type')=="checkbox"){
      $(evform.target).checked;
}

* EDIT UPDATE *

As of December 22, 2013 (the EDGE pre release) of jQuery core, this bug has been fixed. I hope they release the stable version soon (I beleive it will be v1.10)! You can test it in a jfiddle at: http://jsfiddle.net/tj_vantoll/XXGQA/

http://bugs.jqueryui.com/ticket/6267

Answer 1

You have to set the z-index on #dialog, not #interface.

Your code is throwing an error because you're trying to assign a value to a function call. So your code should be:

$('#interface').click(function(evform){
  $('#dialog').css('z-index', 99999);
});

Or just this on your CSS:

#dialog { z-index: 99999; }

UPDATE

This solution is not bullet-proof. The bug report filed for jQueryUI states that the problem happens if the checkboxes have a z-index lower than the overlay below the dialog. jQueryUI seems to be comparing z-indexes in an absolute manner, which goes against the CSS standard (but is understandable, considering a proper comparison would probably be resource-intensive).

So the actual solution may depend on which elements you're setting z-index (and position) inside the dialog. To avoid the bug, no not use z-index inside the dialog, or set a value guaranteed to be higher than what will be (dynamically) assigned to the overlay (hence, my 99999 suggestion).

Answer 2

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

should be

$('#interface').click(function(evform){
  $('#interface').prop('z-index', 99999);
});

The second argument (if provided) sets the property to its value.

Answer 3

The problem turns out to be the return false; I had in my click coding:

$('#interface').click(function(evform){
  *** did stuff here ***

   evform.preventDefault;
   return false; //This is the offending line of code
});

For diagnosis, I wanted to see what had a higher z-index on the page, so I added:

$('*').each(function(){
    if ($(this).css('z-index')>99) { 
        console.log ($(this).css('z-index')+", " + $(this).prop('class'));
    }
});

which gave me all elements with a z-index higher than 99. It turns out that the ui-dialog was normally set to 1001 or 1002, so the '99999' listed by @bfavaretto was more than high enough.

Still don't know why the return false; created the error, but I hope the next update fixes the problem.