вот рабочий, правда ПОКА без захвата фокуса вариант, 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;
});
});