Как стилизовать чекбокс (JS, CSS, wordpress)?

Question

[Себастьян Перейра]

Здравствуйте. Извините за такое название поста, но эмоции уже переполняют мой хрупкий мир.

Хочу стилизовать чекбоксы на этой странице

Пользуюсь этим уроком и этим

Но вот в чём и проблема... Как можете увидеть, на моей странице сделать cheked почти нереально, а если и получилось, то снять уже на получится (хотя с помощью правой кнопки мыши, всё получается, через раз). Менял версии jquery. Отключал скрипты что прописывает WP, всё равно. Подскажите, пожалуйста - 6 часов уж убил(((( соу сад, бат тру.

Answer 1

[Юрий Лобанов]

Мне кажется проблема в использовании label. Он связан с input и у Вас отрабатывается двойной клик.
Попробуйте изменить, используйте, например, параграф.
Эту догадку подтверждает и то, что работает по нажатию правой - после первого клика он сразу вызывает контекстное меню и второй клик не обрабатывается. При нажатии на label (на текст лэйбла) происходит только один клик.
попробую для проверки накидать пример. Но Вам конечно будет проще попробовать.

upd: вот пример jsfiddle.net/iiil/uq8p6/3
Как видите, я был прав.

Answer 2

[Sasha Sasha]

Вот без кучи js
jsfiddle.net/gidrodave/C7MdV/2

Comments

[Krickt]

@Sannyya21 Ток в IE стареньких не будет работать))

[Sasha Sasha]

Ну что же поделаешь )) на то он и старенький ie )

Answer 3

[CGS]

Хм, а почему не реально то?
И кстати всё ставится и снимается если жать на текст чек бокса.
Оставляйте до утра, а завтра снова в бой :)

Answer 4

[Себастьян Перейра]

Добавляем в Input disabled и начинает работать, wtF!!! =(
истерика

Answer 5

[Юрий Лобанов]

скрин

что не так?

Comments

[Себастьян Перейра]

Это я сейчас потому что правил (костыли, хочется без них). Попробуйте сейчас

[Себастьян Перейра]

извините, за пунктуацию - спешим вам ответить

[Себастьян Перейра]

Невозможно сделать "чек" нажимая на сам чекбокс, вот в чем беда

Answer 6

[Юрий Лобанов]

Если все же хотите использовать label, то используйте способ связи label с input посредством id и for. Смотрите пример:
jsfiddle.net/iiil/uq8p6/4
Второй работает корректно только при клике по lable, первый только по чекбоксу, третий работает и так и так.

Comments

[Себастьян Перейра]

Теперь возникла другая проблема. Инпуты рисуются, чекбоксы чекаются, но акшн для аякса не выполняется. Если же нажать на сам инпут ( предварительно показав его, с помощью "просмотр кода элемента" (в хроме)), а не на его спан, то дейсвтие произойдет. Подскажите?

[Юрий Лобанов]

@uJlJluduAH ну так видимо повешено на событие инпута, например на клик. Надо смотреть на вызов функций.

Answer 7

[Евгений Низамиев]

не юзай js, используй средества css

Comments

[Себастьян Перейра]

habrahabr.ru/post/113391

Answer 8

[Krickt]

Выбираю чекбоксы правой кнопкой мыши. :D