[jQuery] Overlaying an element
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("Already in cart!
");
}
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