Disabling Button click action and Enabling when checkbox is checked:

We can disable button click action easily using Html and can enable it using jQuery.

Html code to disable a button:

<h1 class="redeem-head">Redeem Portfolio</h1>
			<p class="subhead">You can redeem your account here by checking the checkbox</p>
			<p class="msg"><input type="checkbox" id="checkbox" name="prog"> <span>Please check the checkbox to redeem your account</span></p>

			<p><input type="button" value="OK" name="okbtn" id="okbtn" class="r-btn" disabled> // here click action is disabled
			<input type="button" value="Cancel" name="cancelbtn" id="cancelbtn" class="r-btn"></p>

We can use disabled property to disable a button click action.

jQuery code to enable a button and to change its CSS:

<script type="text/javascript">
$( window ).load(function() {

	$('#okbtn').css('background-color','#d8d8d8');

});
	$(document).ready(function(){
		$('#checkbox').change(function(){
			if ($('#checkbox').is(':checked') ) {
		    	document.getElementById("okbtn").disabled = false;
		    	$('#okbtn').css('background-color','#f05a50');
		    	// $('#okbtn').hover.css('background-color','#f16a61');
		    	
			} 
			else {
			    document.getElementById("okbtn").disabled = true;
			    $('#okbtn').css('background-color','#d8d8d8');
			   
			}
		});
	});
	$("#okbtn").hover(function(){
    $(this).css("background-color", "#f16a61");
    }, function(){
    $(this).css("background-color", "#f05a50");
});
</script>

In this jQuery code we are fading button color on window load and until checkbox is not checked by user and enabling its click action when checkbox is checked by user.