对话框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屋!