复选框无法在对话框ui中检查

Question

我试图用jQuery UI对话框来解决z-index问题,类似于问题无法选择或取消选择jQuery UI模式对话框中的复选框,知道那里有错误报告.

因此,在尝试按照建议启动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,我用有效的复选框html替换'#interface'的内容,例如:

<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

你必须设置z-index上#dialog,不是#interface.

您的代码抛出错误,因为您正在尝试为函数调用分配值.所以你的代码应该是:

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

或者只是在CSS上:

#dialog { z-index: 99999; }

UPDATE

该解决方案不是防弹的.为jQueryUI提交的错误报告指出,如果复选框的值z-index低于对话框下方的叠加层,则会出现问题.jQueryUI似乎是以绝对的方式比较z索引,这违反了CSS标准(但是可以理解,考虑到适当的比较可能是资源密集型的).

因此,实际的解决方案可能取决于您在对话框中设置z-index(和position)的元素.为了避免这个错误,不要z-index在对话框内使用,或者设置一个值保证高于(动态)分配给覆盖的值(因此,我的 99999建议).