对话框UI中无法选中复选框

Question

我正在尝试使用jQuery UI对话框解决z-index问题，类似于问题“无法选择或取消选择jQuery UI Modal对话框中的复选框” ，知道那里存在错误报告。

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

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

chrome和firefox console.log指出：

未捕获的ReferenceError：赋值中的左侧无效

但是，尽管有错误，该复选框现在仍然有效（每次都引发控制台错误）。 如果我删除违规行，则该复选框将变为“不可点击”。 我该如何正确编码？

我的HTML：

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

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

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

并使用AJAX，将“ #interface”的内容替换为有效的复选框html，例如：

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

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

最后一点，我试图发挥创造力，因为这没有用，并通过以下方式手动切换复选框：

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

*编辑更新*

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

Answer 1

您必须在#dialog而非#interface上设置z-index 。

您的代码抛出错误，因为您试图为函数调用分配值。 所以你的代码应该是：

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

或者只是在您的CSS上：

#dialog { z-index: 99999; }

UPDATE

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

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

Answer 2

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

应该

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

第二个参数（如果提供）将属性设置为其值。

Answer 3

问题原来是return false; 我在点击编码中输入了：

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

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

为了进行诊断，我想查看页面上具有较高z-index的内容，因此我添加了：

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

这给了我所有z索引都高于99的元素。事实证明ui对话框通常设置为1001或1002，因此@bfavaretto列出的'99999'已经足够高了。

仍然不知道为什么return false; 造成了错误，但是我希望下一个更新可以解决该问题。