JSFiddle - React, Tailwind, and code Playground

HTML

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

CSS

.before{
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid transparent;
    content: "";
    background: white;
    background-image: url('http://i.imgur.com/JOEqZaH.png');
    background-repeat: no-repeat;
    background-position:center;
    cursor:pointer;
}

div.jtable-main-container > table.jtable > tbody > tr:hover .before {
    background-color:#f3f3f3;
}

.after{
    /* top: -18px; */
}
.before-checked {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid transparent;
    content: "";
    background: white;
    background-image: url('http://i.imgur.com/nJyPSJr.png');
    background-repeat: no-repeat;
    background-position:center;
    cursor:pointer;
}

.after-checked {
    background-color:#f3f3f3;
}
.edit-hours{
    display:block;
}

JavaScript

$(document).ready(function(){
    $('.edit-hours').before('<span class="before"></span>');
    $('.edit-hours').after('<span class="after"></span>');
    $('.edit-hours:checked').before('<span class="before-checked"></span>');
    $('.edit-hours:checked').after('<span class="after-checked"></span>');

    //set initial state.
    $('.edit-hours').val($(this).is(':checked'));
    
    $('.edit-hours').change(function() {
        if($(this).is(":checked")) {
            $(this).prev().removeClass('before').addClass('before-checked');
            $(this).next().removeClass('after').addClass('after-checked');
        } else{
            $(this).prev().removeClass('before-checked').addClass('before');
            $(this).next().removeClass('after-checked').addClass('after');		
		}
        $('.edit-hours').val($(this).is(':checked'));        
    });


});