Custom checkbox with javascript

custom-checkbox.js

$(document).ready(function(){

	//hide the checkboxes
	$('.ginput_container_checkbox li input').hide();

	//inject the custom checkbox code
	$('.ginput_container_checkbox li input').before('<div class="custom_checkbox"><div class="check_inner"></div></div>');

	//control the new checkbox on click
	$('.ginput_container_checkbox li').on('click', '.custom_checkbox', function(){
		checkBox($(this));
	});

	//disable the lable from activation the hidden checkbox
	$('.ginput_container_checkbox li label').click(function(event){
		event.preventDefault();
	});

});

function checkBox($elem){
	if($elem.hasClass('active')){
		$elem.removeClass('active');
		$elem.next().prop('checked', false);
	}else{
		$elem.addClass('active');
		$elem.next().prop('checked', true);
	}
}