JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<div style="clear:both;">
<button id="abc" value="Joe"/><br/><br/><br/><br/><br/>
</div>
<input type="checkbox" id="myCheckbox1" name="joe" />

<label for="myCheckbox1" class="abc">
  <!--<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
--></label><br /><br/><br/><br/><br/><br/>
<input type="checkbox" id="myCheckbox2" disabled/>
<label for="myCheckbox2" class="abc disabled">
  <!--<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">-->
</label>
<!--<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>-->

CSS

label.disabled:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
  position: absolute;
  z-index: 100;
}
label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}
:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
  display: none;
}
/*pure cosmetics:*/
img {
  width: 350px;
  height: 350px;
}
label {
  margin: 10px;
}

JavaScript

//Replace Checkbox with image

$("#abc").on("click",function(){
var len = $('input[type="checkbox"]:checked').length
alert(len);
})