[jQuery] Overlaying an element

[Steffan A. Cline]

I have a form where check boxes are working like radio dials. I have that
working fine. I even have it where text is appended to the unchecked check
boxes to show it's selected elsewhere in the BIG form. I was asked if I
could overlay a graphic over the unchecked checkboxes essentially hiding
them until the original item is unchecked. Here is how I am doing it with
just text.

$('input[value*="||"]').change(function(){
    var $this = $(this),val = $this.val().split('||')[2];
    $('input:checkbox[value*="' + val + '"]').not($(this)).attr("checked",
false);
    if($('input:checkbox:checked[value*="' + val + '"]').length > 0) {
        $('input:checkbox[value*="' + val + '"] p').remove();
        $('input:checkbox[value*="' + val +
'"]').not($(this)).append("<p>Already in cart!</p>");
        }
    else
        $('input:checkbox[value*="' + val + '"] p').remove();
}); // change


I know it's confusing so I figured the code above would help. It was
requested to remove the other checkboxes but I think that's too complicated
to remove and then restore them. I thought placing a "Already in cart" image
overlaying the checkbox would be better since all I am doing is dynamically
adding and removing it.

Any suggestions are much appreciated.




Thanks

Steffan