: не (: проверено) селектор в 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 обрывается при клонировании флажка с отмеченным свойством. Это означает, что во время клонирования проверяемый атрибут может не представлять состояние атрибута исходного элемента. (Я говорю "может", потому что я не спустился в кроличью нору, чтобы точно увидеть, как реализация отличается, когда установлен флаг 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='waschecked" ".

Вот код загрузки для этого:

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

или же

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

И CSS, чтобы выбрать его:

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

или же

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