Могу сказать как я у себя делал чекбоксы.
Вообщем, есть иконка галочки:
И есть пустое однопиксельное-прозрачное gif изображение.
Вот сам стиль для рамки checkbox'а:
.checkbox {border:1px solid #626262; width:16px; height:16px; opacity:0.8; background:#303030;}
.checkbox:not([alt="2"]):hover {cursor:pointer; opacity:1;}
.checkbox[alt="1"], .checkbox[alt="2"] {background-image: url('ссылка на изобрежние галочки');}
.checkbox[alt="2"] {opacity:0.5;}
А вот уже сам код JavaScript (jQuery):
$('.checkbox').click(function()
{
var a = $(this).attr('alt');
if(a != 2) $(this).attr('alt', a == 1 ? 0 : 1);
});
Или альтернативный вариант (не jQuery):
function checkBox(a)
{
if(a.alt != 2) a.alt = a.alt ? 0 : 1;
}
window.onload = function()
{
var a = document.getElementsByClassName('checkbox'), b;
for(b=0; b<a.length; b++) a[b].onclick = function(b)
{
checkBox(a[b]);
}
}
А вот так вставляем в HTML:
Без галочки: <img alt="0" src="пустая картинка.gif" class="checkbox" />
С галочкой: <img alt="1" src="пустая картинка.gif" class="checkbox" />
Disabled: <img alt="2" src="пустая картинка.gif" class="checkbox" />
Вот скрин с моего сайта:
Под форму наверное не подойдёт, я у себя сделал так, потому что использую всегда ajax и просто получаю значение атрибута alt.
P.S.: альтернативный код JS не проверял, но работать должен.