jQuery custom checkbox - graphic update not working

jQuery custom checkbox - graphic update not working

Trying to set a custom checkbox value when the form loads. Debug tells me
the checkbox reflects the value loaded from a source but the custom
graphic won't update.
In my form I have
<input class="checkbox" type="checkbox" name="uitem_autorenew"
id="uitem_autorenew" />
Style I have:
.checkbox {
display: none;
}
.toggle {
background: url("toggle.png") bottom left;
display: block;
width: 70px;
height: 22px;
}
.toggle.checked {
background-position: top left;
}
Code includes the following
$(document).ready(function() {
$('.checkbox').after(function() {
if ($(this).is(":checked")) {
return "<a href='#' class='toggle checked' ref='" +
$(this).attr("id") + "'></a>";
} else {
return "<a href='#' class='toggle' ref='" +
$(this).attr("id") + "'></a>";
}
});
...into the dialog which has an open event... definitely setting the check
or uncheck feature according to the data
var ar=$(this).data('renew');
console.log("Value of ar = " + ar); // which is Y
if (ar =="Y"){
$("#uitem_autorenew").prop('checked',true); // tried
this
$("#uitem_autorenew").toggleClass("checked");
//tried this too
}
console.log ("Is checkbox checked?");
console.log ($("#uitem_autorenew").prop('checked')); //
yes it is but the graphic has not toggled. Top left of
toggle.png is has word "YES"
I'm just wondering what I am missing in the case that the style has not
changed. Any clues welcomed and thanks in advance. Kevin