Hi,

It's better to code this manually.

Add a Custom Class "button-lock" to your element (whatever it is - just not the Image Link with images already specified, to avoid conflicts, and not the Image either).
Add a Custom Class "cb-lock" to all checkboxes to affect,

Add a Code Block Source type CSS:

.button-lock {
  background: center center no-repeat;
  background-size: contain;
}

.button-lock, .button-lock.locked:hover {
  background-image: url(Files/Other/my-images/unlocked.jpg);
}
.button-lock.locked, .button-lock:not(.locked):hover {
  background-image: url(Files/Other/my-images/locked.jpg);
}

Of course add corresponding images to Files/Other (to make sure they upload automatically) and modify URLs as needed.

Then add a Code Block Source type Javascript:

$(function(){   $('.button-lock').click(function(){     var isLocked = $(this).hasClass('locked');     $(this).toggleClass('locked');     $('.cb-lock  input').prop('checked', isLocked);  }); // here check whether it works in the good direction, otherwise put ! in front of isLocked: prop('checked', !isLocked) });