JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="home">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
            <label for="OptIn">Receive E-mails From Us</label>
    
           <input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
           <label for="tandc">I agree to the <a href="#tc" data-rel="dialog" >Terms &amp; Conditions</a></label>   
       </fieldset>
    </div>
</div>
<div data-role="page" id="tc">
    <div data-role="header"> 
        <h1>T and C</h1> 
    </div>
    Read me
</div>

JavaScript

$('.ui-btn-text').click(function(event) {
    var checked = $("#tandc[type='checkbox']").is(":checked");
    var $this = $(this);
          
    if($this.children('a').length) {
        $.mobile.changePage('#tc', {
            transition : 'pop',
            role       : 'dialog'
        });
    }
    stateOfCheckbox(checked);
});

function stateOfCheckbox(checked) {
    $('#home').live( 'pagebeforeshow',function(event){
        $("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
    });
}