IE9 中的 jQuery 选择器 ':not()' 或方法 '.not()' 行为答案

【问题标题】：jQuery selector ':not()' or method '.not()' behavior in IE9IE9 中的 jQuery 选择器 ':not()' 或方法 '.not()' 行为
【发布时间】：2012-12-20 13:45:08
【问题描述】：

以下 sn-p 使用 chrome 23、firefox 3.5 和 IE9 进行了测试：

<!DOCTYPE html>
<html><head>
      <title>test</title>
      <script src="jquery-1.7.2.min.js"></script>
      <script>
          $(function() {
              $('#id1 *').not('.c1 *').attr('disabled', true);
          });
      </script>
</head><body>
      <div id="id1">
            <div class="c1">
                <input type=radio>td1</input>
            </div>
            <div class="c2">
                <input type=radio>td2</input>
            </div>
      </div>
</body></html>

只有 td2 应该被禁用，但是通常的嫌疑人 (IE9) 会禁用 td1 和 td2。
您将如何解决这个问题？

回答
实际上问题不是由于 jquery 选择器，而是当一个元素在 IE9 中获得“禁用”属性时，所有子元素都被禁用。然而，这在 Chrome 和 FF 中不会发生（至少对于上述版本）。
更多信息在这里：How should disabled 'div' act?

【问题讨论】：

你试过用input代替*吗？
您过滤不正确，这不是 IE9 问题。
pimvdb：感谢您的评论：原来的选择器$('#id1 *').not('.c1 *') 实际上适用于所有 3 个带有 jquery 1.8.3 的浏览器，但 Hunter 的版本 $('#id1 :not(.c1) *') 更准确，适用于所有 3 个带有 jquery 的浏览器1.7.2 也是如此。

标签： javascript jquery internet-explorer-9

【解决方案1】：

试试这个选择器：

$('#id1 :not(.c1) input').attr('disabled', true);

http://jsfiddle.net/QTG7S/

你写的应该改写成这样：

$('#id1 *').not('.c1').find("*").attr('disabled', true);

http://jsfiddle.net/QTG7S/2/

【讨论】：

【解决方案2】：

IE 可能正在做正确的事情：

$('#id1 *') 选择 #id1 中的所有标签，这会为您提供两个 div 和两个输入标签
.not('.c1 *') 从上面的列表中删除 .c1 中的输入标签，你最终得到三个元素：两个 div 和一个输入
您在结果上应用disabled=disabled。在 IE 中，<div disabled=disabled>...</div> 禁用 div 标记及其中的所有内容。

我相信你可以像这样达到预期的效果：

$('#id1 div:not(.c1) :radio').prop('disabled', true);

【讨论】：

生成的 HTML：<div id="id1"> <div class="c1" disabled="disabled"> <input type="radio">td1 </div> <div class="c2" disabled="disabled"> <input disabled="disabled" type="radio">td2 </div> </div>

【解决方案3】：

$('#id1 div').each(function (){
    $(this).children('input').attr('disabled', !$(this).hasClass("c1"));
});

http://jsfiddle.net/hJTzW/4/

【讨论】：

你能告诉我它有什么不同吗？
它检查c1是否是唯一的类，并设置和重置。另外，最好使用否定的if。
在你的each中你可以写$(this).find("*").attr('disabled', !$(this).hasClass("c1"))
好吧，我明白你的意思了。谢谢@hunter，我忘记了hasClass 方法。
几乎，确保在禁用时选择 input 内的 .c1 div 而不是 .c1 div 本身。