Блог

Я использую флажок jquery-ui в контейнере, в котором есть класс ui-widget-content. Это приводит к тому, что css-правило «.ui-widget-content .ui-state-hover», которое определяет свойство background, переопределяет правило .ui-icon-check, которое определяет правильное положение фона для изображения флажка. Я считаю, что это потому, что он более конкретный.

В результате флажок в виджете показывает неправильное изображение. Как мне с этим справиться?

Вот пример jsfiddle. Во втором div, где у меня есть класс ui-widget-content, вы можете видеть, что отмеченное изображение неверно.

 <div class="ui-widget-content">
<label for="cb3">Test 1</label>
<input type="checkbox" id="cb3" class="toggle"/>
<label for="cb4">Test 2</label>
<input type="checkbox" id="cb4" class="toggle" checked="checked"/>
</div>
  

Обратите внимание, что я не могу изменить родительский div. Я работаю в диалоговом окне, для которого требуется этот класс.

Я удивлен, что не могу найти никого, кто жаловался бы на это. Я не уверен, чего мне не хватает.

Таким .ui-icon-check образом, класс перезаписывается более поздним стилем. Вы можете просто записать его обратно.

Один пример: https://jsfiddle.net/Twisty/ewabcy3g/2 / (Исправлено для пустого)

CSS

 .ui-widget-content label span.ui-icon-check {
  background-position: -64px -144px;
}
.ui-widget-content label span.ui-icon-blank {
  background-position: 16px 16px;
}
  

Другой пример: https://jsfiddle.net/Twisty/ewabcy3g/1 /

jQuery

 $('.nonwidget,.ui-widget-content').controlgroup({
  "direction": "vertical"
}).find(".ui-icon-check").css("background-position", "-64px -144px");
  

Надеюсь, это поможет.

Обновить

Нашел кое-что интересное, все еще немного хака, но, похоже, это помогает:

https://jsfiddle.net/Twisty/ewabcy3g/3/

Когда я удалил атрибут checked и установил его с помощью jQuery, вот так:

 $('.toggle').checkboxradio();
$("#cb4").attr("checked", true);
$('.nonwidget,.ui-widget-content').controlgroup({
  "direction": "vertical"
});
  

Я мог бы удалить CSS-хаки. Я обнаружил, что, вернув позиционирование CSS, он все еще считывал фоновое изображение при наведении курсора и не сохранял правильный стиль.

Затем я попытался добавить checked="checked" обратно в HTML, и он снова облажался.