Показать сообщение отдельно
  #3 (permalink)  
Старый 08.10.2012, 06:43
Новичок на форуме
Отправить личное сообщение для POMAH-UST Посмотреть профиль Найти все сообщения от POMAH-UST
 
Регистрация: 19.05.2010
Сообщений: 8

вот рабочий, правда ПОКА без захвата фокуса вариант, checkbox click и данные передаются правильно проверено в IE6/7/8/9, Opera 12, Mozilla Firefox 3.6.28/15.0.1, Chrome и Safari

$(function() {
	// инициализируем все checkbox-ы и прячем их
	var myCheckbox = $(':checkbox').css({'display':'none'});
	// окружаем все checkbox-ы в элемент span с классом checkbox
	myCheckbox.wrap('<span class="checkbox"></span>');
	// инициализируем все элементы span с классом checkbox
	var myImgCheckbox = $('.checkbox');
	// ищем среди checkbox-ов активные и добавляем элементу span с классом checkbox ещё класс checked
	myCheckbox.each(function() {
		if($(this).is(':checked') && $(this).is(':disabled')) $(this).parent(myImgCheckbox).removeClass('checked').addClass('checkedDisabled');
		else if($(this).is(':disabled')) $(this).parent(myImgCheckbox).addClass('disabled');
		else if($(this).is(':checked')) $(this).parent(myImgCheckbox).addClass('checked');
	});
	// делаем клик на элементе span с классом checkbox
	myImgCheckbox.click(function() {
		// инициализируем checkbox внутри элемента span с классом checkbox
		var myChildren = $(this).children(myCheckbox);
		// если checkbox не закрыт, то работаем по нему
		if(!myChildren.is(':disabled'))
		{
			// проверяем если checkbox активный то:
			if(myChildren.is(':checked')) {
				// убираем аттрибут checked у checkbox-а, а у элемента span удаляем класс checked
				myChildren.attr('checked', false).parent(myImgCheckbox).removeClass('checked');
			}
			else {
				// добавляем аттрибут checked у checkbox-а, а элементу span добавляем класс checked
				myChildren.attr('checked', true).parent(myImgCheckbox).addClass('checked');
			}
			// вешаем на checkbox событие change
			myChildren.trigger('change');
			return false;
		}
	});
	// инициализируем элемент label
	var myLabel = $('label');
	// делаем клик на элементе label
	myLabel.click(function() {
		// инициализируем элемент на котором был сделан клик
		var myLabelThis = $(this);
		// если у элемента label есть аттрибут for то:
		if(myLabelThis.attr('for')) {
			// пробегаемся по всем checkbox-ам
			myCheckbox.each(function() {
				// инициализируем checkbox-ы
				var myCheckboxThis = $(this);
				// если у checkbox-а аттрибут id равен аттрибуту for элемента label и checkbox не закрыт то:
				if((myCheckboxThis.attr('id') == myLabelThis.attr('for')) && !myCheckboxThis.is(':disabled')) {
					// проверяем если checkbox активный то:
					if(myCheckboxThis.is(':checked')) {
						// убираем аттрибут checked у checkbox-а, а у элемента span удаляем класс checked
						myCheckboxThis.attr('checked', false).parent(myImgCheckbox).removeClass('checked');
					}
					else  {
						// добавляем аттрибут checked у checkbox-а, а элементу span добавляем класс checked
						myCheckboxThis.attr('checked', true).parent(myImgCheckbox).addClass('checked');
					}
					// вешаем на checkbox событие change
					myCheckboxThis.trigger('change');
				}
			});
		}
		else
		{
			// если checkbox внутри элемента label не закрыт то:
			if(!myLabelThis.find(myCheckbox).is(':disabled')) {
				// проверяем если checkbox активный то:
				if(myLabelThis.find(myCheckbox).is(':checked')) {
					// убираем аттрибут checked у checkbox-а, а у элемента span удаляем класс checked
					myLabelThis.find(myCheckbox).attr('checked', false).parent(myImgCheckbox).removeClass('checked');
				}
				else {
					// добавляем аттрибут checked у checkbox-а, а элементу span добавляем класс checked
					myLabelThis.find(myCheckbox).attr('checked', true).parent(myImgCheckbox).addClass('checked');
				}
				// вешаем на checkbox событие change
				myLabelThis.find(myCheckbox).trigger('change');
			}
		}
		return false;
	});
});

Последний раз редактировалось POMAH-UST, 08.10.2012 в 08:33.
Ответить с цитированием