Комментарии 76
а чем вас не устраивает использование label for=""? Просто любопытно :)
+10
потому что нельзя стилизовать чекбоксы.
-7
Их не надо стилизовать, вот вариант jsfiddle.net/kpanenko/4f76m/
+5
вы не учли много вариантов:
если чекбокс при старте страницы
— чекнут
— в фокусе
— задизейбленый
— задизейбленый и ченутий
— чекнут и в фокусе
плюс в вашем варианте нет колбеков, нет кастомных событей, не изменится состояние чекбокса когда у него фукус и вы жмете пробел, не подсвечивается при таб-обходе, при ресете не изменится картинка…
если чекбокс при старте страницы
— чекнут
— в фокусе
— задизейбленый
— задизейбленый и ченутий
— чекнут и в фокусе
плюс в вашем варианте нет колбеков, нет кастомных событей, не изменится состояние чекбокса когда у него фукус и вы жмете пробел, не подсвечивается при таб-обходе, при ресете не изменится картинка…
0
jsfiddle.net/Z27rL/ вот вам с выполнением всех требований. И без js.
+7
но это не работает ниже ie9
-4
может, все же лучше и аккуратнее использовать полифилл вроде selectivizr.com/?
+2
И, как насчет колбеков и кастомных событей?
-5
а почему бы их просто не навесить на сами чекбоксы?
+2
как вы навесите событие изминение атрибута чекбокса например в disabled=«disabled»?
-2
$input.on('change'). А вас что-то смущает?
+2
Вы хотите сказать что обработчик событие change сработает если атрибут disabled получит значение disabled?
Я тепер понимаю какой у вас уровень jQuery, и почему вы так отстаиваете на не всюду рабочей версии CSS с малым количеством возможностей.
Я тепер понимаю какой у вас уровень jQuery, и почему вы так отстаиваете на не всюду рабочей версии CSS с малым количеством возможностей.
-3
Отличная дуэль, господа.
+3
да, прошу прощения, задумался, перепутал с checked.
Checked (параметр html-ноды, не атрибут) запускает событие change:
document.querySelector('input').checked = true
Корректно и правильно возможно отлавливать изменение любого атрибута, в том числе disabled, только так(возможно, где-то есть баг, я не проверял код):
С полифиллом будет ie9+. А
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+. А
0
плюс без плагина вроде єтого вы не имеете возможности, чекнуть или сделать одно и с выше перечисленных состояний для групы чекбоксов
-3
нет возможности стилизировать родителя, что часто требуется.
-3
нельзя внутри label размещать input клик по label ставит у фокус, тригает клик или изменяет стан (как у случаи с чекбоксом) внутринего элемента формы, может наблюдатся у некоторых браузерах «двойной клик», если нужна такая структура, то надо в обработчику события клику по input написать event.stopPropagation()
0
нельзя стилизовать отца, а еще надо различные колбеки — что есть в этом плагине.
-2
колбэки можно и нужно вешать на 'change' событие, так более, гхм, семантично, как минимум.
а стилизовать отца как-то тоже зло очень.
а стилизовать отца как-то тоже зло очень.
+2
а если вам не надо чекать чекбокс при клике, а только когда придет ответ от сервера?
-1
или же задизейблить
или в фокус поставить
и т. п.
этот плагин снабжен необходимыми методами.
или в фокус поставить
и т. п.
этот плагин снабжен необходимыми методами.
-1
А еще он борщ умеет варить.
Никто не говорит что плагин плох, но вам предложили более простое, лаконичное и семантически более верное решение.
Все остальные требования как, то: колбэки, «стилизовать отца» (надо бы запомнить фразу) и т.д., могут понадобиться, а могут и нет. Если они нужны они решаются элементарно в пару строчек JS.
Никто не говорит что плагин плох, но вам предложили более простое, лаконичное и семантически более верное решение.
Все остальные требования как, то: колбэки, «стилизовать отца» (надо бы запомнить фразу) и т.д., могут понадобиться, а могут и нет. Если они нужны они решаются элементарно в пару строчек JS.
0
Спасибо вам за труд.
Но я как-то привык делать нестандартные переключатели для форм через :checked, т.е. на гольном CSS.
А для IE7-8 checked-polyfill.
Но я как-то привык делать нестандартные переключатели для форм через :checked, т.е. на гольном CSS.
А для IE7-8 checked-polyfill.
+3
Примеров много:
kizu.ru/fun/controls/,
pepelsbey.net/2012/08/stylish-switch/,
www.thecssninja.com/demo/css_custom-forms/legacy/ первая ссылка из гугла.
kizu.ru/fun/controls/,
pepelsbey.net/2012/08/stylish-switch/,
www.thecssninja.com/demo/css_custom-forms/legacy/ первая ссылка из гугла.
0
все они используют селекторы которые не работают в всех браузерах.
0
А для IE7-8 checked-polyfill.Основная мысль моего комментария в том, что можно использовать вашу разработку как polyfill для старых браузеров, но в подавляющем большинстве современных браузеров данная задача проще и быстрее решается средствами CSS.
+1
А как насчет комментариев ниже
0
но checked-polyfill не стилезирует задизейблены чекбоксы, чекбоксы в фокусе, задизейблены и чекнуты чекбоксы, чекбосы при навидении, чекбоксы в активном стане.
0
но, нет возможности стилизировать блок который обертывает чекбокс и label
-1
А представте если вам надо чекнуть чекбокс после прихода ajax запроса.
С етим плагином можно ето сделать.
Нативными методами — нет.
С етим плагином можно ето сделать.
Нативными методами — нет.
-1
В чем проблема его чекнуть как обычный чекбокс через JS?
0
но если вы на него нажмете то он автоматически изменится, а с имеющимися колбеками вы это сделаете правильно
-1
Извините, не понимаю вас. Поясните, что вы имеете в виду?
0
если вы жмете на чекбокс то он изменяется, а если вам нужно чекнуть или анчекнуть чекбокс после того как придет ajax — запрос, с помощь метода
trigger
это можно сделать-1
И что? В чем проблема строчечку в js написать?
$('input').attr('checked');
0
но, если вы физически кликните на него то он изменится посредством браузера
-1
Извините, какие вещества вы употребляли за последнее время? :D
+4
например вам надо чтобы чекбокс чекнулся или же одержал какое то иное состояние после прихода ответа от сервера, если вы на него кликните левой кнопкой мышки то он изменится мгновенно — посредством браузера. А нам этого не надо!
-1
return false вам о чем-нибудь говорит?
0
все правильно пишете, но если вам придется изменить состояние чекбокса, на
— чекнут
— не чекнут
— в фокусе
— задизейбленый
— задизейбленый и чекнутий
— чекнут и в фокусе
при этом дать какие то классы на него + на его родителя (что бы соотвествувало дизайну)
а сначало ище удалить все ненужные класы
Вы будете для этого писать велосипед, а зачем новый если есть старый
все что нужно написать:
— чекнут
— не чекнут
— в фокусе
— задизейбленый
— задизейбленый и чекнутий
— чекнут и в фокусе
при этом дать какие то классы на него + на его родителя (что бы соотвествувало дизайну)
а сначало ище удалить все ненужные класы
Вы будете для этого писать велосипед, а зачем новый если есть старый
все что нужно написать:
$(‘.frame-checks-not-standart’).nStCheck();
-1
preventDefault() в событии onclick вам ни о чем не говорит? Сначала запоминаем target при возникновении события, отправляем запрос на сервер и по возвращению меняем атрибут у target. Делов-то. Всегда задавался вопросом при мысли о таких плагинах — если плагин по каким-то причинам придётся отключить будет ли работать основной функционал чекбоксов? Если нет, то на помойку такой плагин — все события должны быть навешаны на чекбоксы, а плагин должен их всего лишь перехватывать, чтобы отображать состояние.
+1
preventDefault(); — говорит как и retrun false;
Плагин рабатет при выключеном javascript-е. Описано как задача с самого начала статьи, и чуть ниже написано:
Класс b_n в стилях должен иметь правило background-image:none для того, чтобы при выключенном javascript-е сберечь стандартные чекбоксы.
Плагин рабатет при выключеном javascript-е. Описано как задача с самого начала статьи, и чуть ниже написано:
Класс b_n в стилях должен иметь правило background-image:none для того, чтобы при выключенном javascript-е сберечь стандартные чекбоксы.
0
я не про выключенный js говорил, а про выключенный плагин стилизации контролов. Я понимаю, что ситуация специфическая, но смысл в том, чтобы изначально все события привязывать к оригинальному контролу, а не эмулированному.
0
У вас есть функция checkChecked, которая устанавливает атрибут checked оригинальному контролу, но нет события change на этот контрол, поэтому я не смогу какой-то внешней функцией привязаться на onchange к оригинальному контролу, мне придется привязываться к специфичному nstcheck.cc. А если завтра по каким-то причинам мне придется отказаться от этого плагина или заменить его на другой? То всё, весь функционал рухнет, потому что был завязан на специфичные события несуществующего плагина?
В общем все это плохо, потому что вы лишаете разработчика стандартных методов работы с контролом и подсовываете свой велосипед предлагая весь функционал завязать на нём.
В общем все это плохо, потому что вы лишаете разработчика стандартных методов работы с контролом и подсовываете свой велосипед предлагая весь функционал завязать на нём.
0
может я чего то не понял, но не обезательно привязываться примеру к nstcheck.cc, вы можете и далее обрабатывать change
здесь я дописал $('input').change(function(){alert(1)})
здесь я дописал $('input').change(function(){alert(1)})
0
Посмотреть пример на jsfiddle
jsfiddle.net/domovoj/9BPAf/
P. S. сылка почему то не вставилась — может через recovery mode :)
jsfiddle.net/domovoj/9BPAf/
P. S. сылка почему то не вставилась — может через recovery mode :)
0
Не хочу показаться занудой, но это скорее называется non-standard checkboxes, так будет правильнее. Not Standart — слишком уж по-русски :)
+1
Без js csscheckbox.com
0
jsfiddle ссылка из поста не работает. вижу одинаковые чекбоксы в обоях случаях
0
В Internet Explorer 5.5 немножко сбоит верстка, нельзя ли поправить?
+10
0
НЛО прилетело и опубликовало эту надпись здесь
Если используете почту Gmail там есть фильтр на фронте (http://prntscr.com/282n9o)
Там есть и подсвечевание родителя и элемента-обертки чекбокса (енужность которого так сильно оговаривалось здесь) и колбеки и изменение групы чекбоксов.
Конечно там не используются чекбоксы только в упрощенной версии, но суть таже.
Там есть и подсвечевание родителя и элемента-обертки чекбокса (енужность которого так сильно оговаривалось здесь) и колбеки и изменение групы чекбоксов.
Конечно там не используются чекбоксы только в упрощенной версии, но суть таже.
-2
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Нестандартные чекбоксы