JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
        <h1 class="redeem-head">Redeem Portfolio</h1>
        <p class="subhead">check the checkbox to enable ok button</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> 
        <input type="button" value="Cancel" name="cancelbtn" id="cancelbtn" class="r-btn"></p>
    </div>

CSS

.content{border:1px solid #333;padding:35px 12px;width:500px;margin-bottom:10px;background:#5AB0A6;margin: 0 auto;}
    .addlnk{text-indent:40px;}

JavaScript

$(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');
		               
		            }
		        });
		    });