:not(:checked) safari 5 中的选择器结果不一致

Question

我有一堆复选框。其中一些开始使用 checked 属性进行检查。当您选中之前未选中的内容或取消选中之前选中的内容时，我会以不同的方式设置样式，以便用户可以看到更改了哪些复选框。在 Safari 5 我正在使用这个选择器：

[checked]:not(:checked), :not([checked]):checked{ border:1px solid red; }

它起作用了，他们得到了漂亮的红色边框。

然而，jQuery 似乎无法使用相同的选择器。当我这样做时

$('[checked]:not(:checked), :not([checked]):checked').length

我每次都得到0，还有

$('[checked]:not(:checked)') 或 $(':not([checked]):checked')。它总是 0.

我正在使用 jQuery 函数来确定用户是否有未保存的更改。有解决方法吗？如果它一直完全失败，那将是一回事，但令人困惑的是，它正确地设置了 CSS 元素的样式，但 jQuery 却令人窒息。使用 jQuery 1.9.1，适用于我尝试过的所有其他浏览器。

Answer 1

您要克隆这些复选框吗？如果是这样，似乎 webKit 在克隆带有选中属性的复选框时中断。这意味着，在克隆期间，选中的 attribute 可能不代表原始元素的 attribute 状态。（我说 'may' 是因为我没有深入了解设置 support.appendChecked 标志时实现的具体差异）

这里是jQuery.1.9.1.js中的相关支持检测代码

// #11217 - WebKit loses check when the name is after the checked attribute
input.setAttribute( "checked", "t" );
input.setAttribute( "name", "t" );

fragment = document.createDocumentFragment();
fragment.appendChild( input );

// Check if a disconnected checkbox will retain its checked
// value of true after appended to the DOM (IE6/7)
support.appendChecked = input.checked;

// WebKit doesn't clone checked state correctly in fragments
support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

不管怎样，我想我有一个非常简单的解决方法，尽管有一点开销：

准备（或让服务器呈现）任何新的可检查 DOM 元素，方法是为它们提供表示原始检查状态的属性，如 "data-waschecked='true'"，或使用 class，如"class='waschecked'"。

这是执行此操作的加载代码：

$(":checked").attr("data-waschecked","true");

或

$(":checked").addClass("waschecked");

和css到select它：

[data-waschecked='true']:not(:checked), :checked:not([data-waschecked='true']) { 
    border:1px solid red; 
}

或

.waschecked:not(:checked),:checked:not(.waschecked) { 
    border:1px solid red; 
}

:not(:checked) safari 5 中的选择器结果不一致

:not(:checked) selector in safari 5 inconsistant results

html

safari

jquery