I am trying to create a simple enabled/disabled radio button grouping on a form. I had planned on using an image of a check mark for enabled and an x disabled. I want the element that wasn't clicked to go gray to make it clear which is selected. Help would be appreciated.
Try the following
JQUERY
$(function() {
$('input:radio').each(function() {
$(this).hide();
$('<a class="radio-fx" href="#"><div class="radio"></div></a>').insertAfter(this);
});
$('.radio-fx').live('click',function(e) {
e.preventDefault();
var $check = $(this).prev('input');
$('.radio-fx div').attr('class','radio');
$(this).find('div').attr('class','radio-checked');
$check.attr('checked', true);
});
});
CSS
.radio {
background: url(radiobutton_no.png) no-repeat;
width: 16px;
height: 16px;
}
.radio-checked {
background: url(radiobutton_yes.png) no-repeat;
width: 16px;
height: 16px;
}