对话框UI中无法选中复选框 [英] Checkbox not checkable in dialog ui

问题描述

我正在尝试使用jQuery UI对话框解决z-index问题，类似于问题

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.

因此，在尝试按照建议的方式增加z-index时，我添加了以下代码:

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

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

chrome和firefox console.log指出:

where the chrome and firefox console.log states:

未捕获的ReferenceError:分配中的左侧无效

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?

我的HTML:

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

(顺便说一句，我尝试将内联样式添加到<p>，但没有用:

(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>

使用AJAX，我将'#interface'的内容替换为有效的复选框html，例如:

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

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

并且我包含了通常的jQuery/Dialog UI文件.

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

*编辑更新*

自2013年12月22日(EDGE预发行版)的jQuery核心以来，此错误已得到修复.我希望他们尽快发布稳定版本(我相信它将是v1.10)！您可以在jfiddle中对其进行测试: http://jsfiddle.net/tj_vantoll/XXGQA/

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

推荐答案

您必须在#dialog而不是#interface上设置z-index.

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

或者仅在CSS上显示

#dialog { z-index: 99999; }

更新

此解决方案不是防弹的.提交给jQueryUI的错误报告指出，如果复选框的z-index低于对话框下方的叠加层，则会发生此问题. jQueryUI似乎在以绝对方式比较z-index，这与CSS标准背道而驰(但可以理解，考虑适当的比较可能会占用大量资源).

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).

因此，实际的解决方案可能取决于您在对话框内设置的z-index(和position)元素.为避免该错误，请不要在对话框内使用z-index，或将值设置为保证高于(动态)分配给叠加层的值(因此，我的99999建议).

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).

这篇关于对话框UI中无法选中复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！