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;
}

Thank you to anyone willing to help me figure this out!