вы не учли много вариантов:

если чекбокс при старте страницы
— чекнут
— в фокусе
— задизейбленый
— задизейбленый и ченутий
— чекнут и в фокусе

плюс в вашем варианте нет колбеков, нет кастомных событей, не изменится состояние чекбокса когда у него фукус и вы жмете пробел, не подсвечивается при таб-обходе, при ресете не изменится картинка…

Jabher Nov 28 2013 at 22:22

jsfiddle.net/Z27rL/ вот вам с выполнением всех требований. И без js.

frontMisc Nov 28 2013 at 22:27

но это не работает ниже ie9

-4

Jabher Nov 28 2013 at 22:36

может, все же лучше и аккуратнее использовать полифилл вроде selectivizr.com/?

frontMisc Nov 28 2013 at 22:43

этот плагин рассчитан не только иметь возможность стилизировать чекбоксы, но и иметь инструмент для того чтобы изменять разные состояния одного или групы чекбоксов.

-3

frontMisc Nov 28 2013 at 22:27

И, как насчет колбеков и кастомных событей?

-5

Jabher Nov 28 2013 at 22:38

а почему бы их просто не навесить на сами чекбоксы?

frontMisc Nov 28 2013 at 22:49

как вы навесите событие изминение атрибута чекбокса например в disabled=«disabled»?

-2

Jabher Nov 29 2013 at 00:17

$input.on('change'). А вас что-то смущает?

frontMisc Nov 29 2013 at 02:31

Вы хотите сказать что обработчик событие change сработает если атрибут disabled получит значение disabled?

Я тепер понимаю какой у вас уровень jQuery, и почему вы так отстаиваете на не всюду рабочей версии CSS с малым количеством возможностей.

-3

imater Nov 29 2013 at 08:40

Отличная дуэль, господа.

Jeisooo Nov 29 2013 at 09:05

А кто победил, заплюсованный или заминусованный?

Jabher Nov 29 2013 at 09:17

да, прошу прощения, задумался, перепутал с checked.
Checked (параметр html-ноды, не атрибут) запускает событие change:
document.querySelector('input').checked = true

Корректно и правильно возможно отлавливать изменение любого атрибута, в том числе disabled, только так(возможно, где-то есть баг, я не проверял код):

(new MutationObserver(function(mutationRecords){
    [].forEach.call(mutationRecords, function(mutationRecord){
        if ((mutationRecord.target.tagName === 'INPUT') && 
            (mutationRecord.target.type === 'checkbox') && 
            (mutationRecord.attributeName === 'disabled')) 
                  mutationRecord.target.dispatchEvent(new CustomEvent('disable', {
                       bubbles: false,
                       cancelable: false
                  }))
        
    })
})).observe(document.body, {
    attriubutes: true, 
    subtree: true
}).

С полифиллом будет ie9+. А

frontMisc Nov 28 2013 at 22:30

плюс без плагина вроде єтого вы не имеете возможности, чекнуть или сделать одно и с выше перечисленных состояний для групы чекбоксов

-3

frontMisc Nov 28 2013 at 22:33

нет возможности стилизировать родителя, что часто требуется.

-3

frontMisc Nov 29 2013 at 02:20

нельзя внутри label размещать input клик по label ставит у фокус, тригает клик или изменяет стан (как у случаи с чекбоксом) внутринего элемента формы, может наблюдатся у некоторых браузерах «двойной клик», если нужна такая структура, то надо в обработчику события клику по input написать event.stopPropagation()

frontMisc Nov 28 2013 at 21:47

нельзя стилизовать отца, а еще надо различные колбеки — что есть в этом плагине.

-2

Jabher Nov 28 2013 at 22:21

колбэки можно и нужно вешать на 'change' событие, так более, гхм, семантично, как минимум.
а стилизовать отца как-то тоже зло очень.

frontMisc Nov 28 2013 at 22:35

а если вам не надо чекать чекбокс при клике, а только когда придет ответ от сервера?

-1

frontMisc Nov 28 2013 at 22:37

или же задизейблить
или в фокус поставить
и т. п.

этот плагин снабжен необходимыми методами.

-1

Jabher Nov 29 2013 at 01:48

<input type="checkbox" disabled>

input:disabled ~ {}

<input type="checkbox" checked>

input:checked ~ {}

<input type="checkbox" autofocus>

input:focus ~ {}

не вижу сути проблемы

zloyusr Nov 29 2013 at 01:29

А еще он борщ умеет варить.
Никто не говорит что плагин плох, но вам предложили более простое, лаконичное и семантически более верное решение.
Все остальные требования как, то: колбэки, «стилизовать отца» (надо бы запомнить фразу) и т.д., могут понадобиться, а могут и нет. Если они нужны они решаются элементарно в пару строчек JS.

frontMisc Nov 29 2013 at 02:37

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

GruZZ Nov 28 2013 at 21:44

Спасибо вам за труд.
Но я как-то привык делать нестандартные переключатели для форм через :checked, т.е. на гольном CSS.
А для IE7-8 checked-polyfill.

GruZZ Nov 28 2013 at 21:52

Примеров много:
kizu.ru/fun/controls/,
pepelsbey.net/2012/08/stylish-switch/,
www.thecssninja.com/demo/css_custom-forms/legacy/ первая ссылка из гугла.

frontMisc Nov 28 2013 at 21:56

все они используют селекторы которые не работают в всех браузерах.

GruZZ Nov 28 2013 at 22:02

А для IE7-8 checked-polyfill.

Основная мысль моего комментария в том, что можно использовать вашу разработку как polyfill для старых браузеров, но в подавляющем большинстве современных браузеров данная задача проще и быстрее решается средствами CSS.

frontMisc Nov 28 2013 at 22:04

А как насчет комментариев ниже

frontMisc Nov 28 2013 at 22:09

но checked-polyfill не стилезирует задизейблены чекбоксы, чекбоксы в фокусе, задизейблены и чекнуты чекбоксы, чекбосы при навидении, чекбоксы в активном стане.

frontMisc Nov 28 2013 at 21:58

но, нет возможности стилизировать блок который обертывает чекбокс и label

-1

frontMisc Nov 28 2013 at 21:59

А представте если вам надо чекнуть чекбокс после прихода ajax запроса.
С етим плагином можно ето сделать.
Нативными методами — нет.

-1

kapuletti Nov 28 2013 at 22:14

В чем проблема его чекнуть как обычный чекбокс через JS?

frontMisc Nov 28 2013 at 22:20

но если вы на него нажмете то он автоматически изменится, а с имеющимися колбеками вы это сделаете правильно

-1

kapuletti Nov 28 2013 at 22:22

Извините, не понимаю вас. Поясните, что вы имеете в виду?

frontMisc Nov 28 2013 at 22:25

если вы жмете на чекбокс то он изменяется, а если вам нужно чекнуть или анчекнуть чекбокс после того как придет ajax — запрос, с помощь метода trigger это можно сделать

-1

kapuletti Nov 28 2013 at 22:42

И что? В чем проблема строчечку в js написать?
$('input').attr('checked');

frontMisc Nov 28 2013 at 22:45

но, если вы физически кликните на него то он изменится посредством браузера

-1

kapuletti Nov 28 2013 at 22:46

Извините, какие вещества вы употребляли за последнее время? :D

frontMisc Nov 28 2013 at 22:59

например вам надо чтобы чекбокс чекнулся или же одержал какое то иное состояние после прихода ответа от сервера, если вы на него кликните левой кнопкой мышки то он изменится мгновенно — посредством браузера. А нам этого не надо!

-1

kapuletti Nov 28 2013 at 23:25

return false вам о чем-нибудь говорит?

frontMisc Nov 28 2013 at 23:34

все правильно пишете, но если вам придется изменить состояние чекбокса, на

— чекнут
— не чекнут
— в фокусе
— задизейбленый
— задизейбленый и чекнутий
— чекнут и в фокусе

при этом дать какие то классы на него + на его родителя (что бы соотвествувало дизайну)
а сначало ище удалить все ненужные класы
Вы будете для этого писать велосипед, а зачем новый если есть старый

все что нужно написать:
$(‘.frame-checks-not-standart’).nStCheck();

-1

dshster Nov 29 2013 at 09:52

preventDefault() в событии onclick вам ни о чем не говорит? Сначала запоминаем target при возникновении события, отправляем запрос на сервер и по возвращению меняем атрибут у target. Делов-то. Всегда задавался вопросом при мысли о таких плагинах — если плагин по каким-то причинам придётся отключить будет ли работать основной функционал чекбоксов? Если нет, то на помойку такой плагин — все события должны быть навешаны на чекбоксы, а плагин должен их всего лишь перехватывать, чтобы отображать состояние.

frontMisc Nov 29 2013 at 13:53

preventDefault(); — говорит как и retrun false;
Плагин рабатет при выключеном javascript-е. Описано как задача с самого начала статьи, и чуть ниже написано:

Класс b_n в стилях должен иметь правило background-image:none для того, чтобы при выключенном javascript-е сберечь стандартные чекбоксы.

dshster Dec 1 2013 at 12:31

я не про выключенный js говорил, а про выключенный плагин стилизации контролов. Я понимаю, что ситуация специфическая, но смысл в том, чтобы изначально все события привязывать к оригинальному контролу, а не эмулированному.

dshster Dec 1 2013 at 12:47

У вас есть функция checkChecked, которая устанавливает атрибут checked оригинальному контролу, но нет события change на этот контрол, поэтому я не смогу какой-то внешней функцией привязаться на onchange к оригинальному контролу, мне придется привязываться к специфичному nstcheck.cc. А если завтра по каким-то причинам мне придется отказаться от этого плагина или заменить его на другой? То всё, весь функционал рухнет, потому что был завязан на специфичные события несуществующего плагина?

В общем все это плохо, потому что вы лишаете разработчика стандартных методов работы с контролом и подсовываете свой велосипед предлагая весь функционал завязать на нём.

frontMisc Dec 1 2013 at 13:57

может я чего то не понял, но не обезательно привязываться примеру к nstcheck.cc, вы можете и далее обрабатывать change
здесь я дописал $('input').change(function(){alert(1)})

frontMisc Dec 1 2013 at 20:25

Посмотреть пример на jsfiddle
jsfiddle.net/domovoj/9BPAf/

P. S. сылка почему то не вставилась — может через recovery mode :)

ArtKun Nov 28 2013 at 22:12

Не хочу показаться занудой, но это скорее называется non-standard checkboxes, так будет правильнее. Not Standart — слишком уж по-русски :)

frontMisc Nov 28 2013 at 22:22

Согласен :)

xGromMx Nov 28 2013 at 22:39

Без js csscheckbox.com

frontMisc Nov 28 2013 at 22:46

<ie9 — нет

CyberAP Nov 28 2013 at 23:09

И слава богу.

lolmaus Nov 29 2013 at 07:43

Но и ваш в IE8 не работает.

frontMisc Nov 29 2013 at 15:14

там data-uri используется для картинки, если поставить физическую картинку все будет нормально.

dikkini Nov 28 2013 at 23:31

jsfiddle ссылка из поста не работает. вижу одинаковые чекбоксы в обоях случаях

frontMisc Nov 28 2013 at 23:37

поправил

dikkini Nov 29 2013 at 00:16

1 focus checked и 2 disabled, и 3 disabled and checked не работают как надо.
1. после снятия чека с бокса теряется фокус и больше не восстанавливается.
2. не видно что задизаблен чекбокс
3. можно снять галочку и поставить.

SerDIDG Nov 29 2013 at 02:54

С disabled and checked можно снять галочку, просто покликав по другим и кликнув на него.

frontMisc Nov 29 2013 at 03:08

спасибо, поправил.

frontMisc Nov 29 2013 at 02:58

1,2 — там табиндексы прописаны,

2 — визуально не видно?
3 — поправил

lolmaus Nov 29 2013 at 07:41

2 — да, если чекбоксы без галочки, то активный от задисэйбленного не отличить.

marcus Nov 29 2013 at 01:59

В Internet Explorer 5.5 немножко сбоит верстка, нельзя ли поправить?

+10

UFO just landed and posted this here

lolmaus Nov 29 2013 at 07:40

Поправил TabIndex'ы: jsfiddle.net/9BPAf/23/embedded/result/

Действительно классно работает.

GreatRash Nov 29 2013 at 11:09

Ваши tabindex неправильно работают. Только что чекнутый чекбокс должен стать текущим и при нажатии на таб переходы должны с него начинаться.

lolmaus Nov 29 2013 at 11:24

Я только расставил номера табиндексов по порядку в HTML-коде. Все претензии к автору поста.

GreatRash Nov 29 2013 at 11:43

Вы написали: «поправил», ну я и подумал всякое…

UFO just landed and posted this here

SerDIDG Nov 29 2013 at 19:55

209 строк не считая что ещё и жЫквери нужен.

dshster Dec 1 2013 at 12:32

Хорошо еще jquery ui здесь нет, а то всякое бывает…

SerDIDG Dec 1 2013 at 12:37

И немного YUI для пряности.

frontMisc Dec 1 2013 at 14:03

этот плагин написан по потребности, а не чтоб навешать всего подряд, если вам етого не нужно то я за вас рад. Какое-то стихотворение вышло :)

frontMisc Dec 2 2013 at 02:51

Если используете почту Gmail там есть фильтр на фронте (http://prntscr.com/282n9o)

Там есть и подсвечевание родителя и элемента-обертки чекбокса (енужность которого так сильно оговаривалось здесь) и колбеки и изменение групы чекбоксов.

Конечно там не используются чекбоксы только в упрощенной версии, но суть таже.

-2