Question

使用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?

Answer 1

请尝试使用此选择器：

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

http://jsfiddle.net/QTG7S/

你写的内容应该像这样重写：

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

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

Answer 2

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

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

Answer 3

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

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

我相信你可以达到预期的结果：

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

IE9中的jQuery选择器'：not（）'或方法'.not（）'行为

3 个答案: