Check / Uncheck boxes

Jquery Mobile

by Omar X

HTML

<div data-role="page" data-theme="b">
    <!-- header -->
    <div data-role="header" data-theme="d" data-position="fixed">
         <h1>Header</h1>

    </div>
    <!-- content -->
    <div data-role="content">
        <input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />
        <label for="chkBox1">Un-check "checkBox 2"</label>
        <input type="checkbox" name="art" id="chkBox2" data-mini="true" data-theme="c" />
        <label for="chkBox2">checkBox 2</label>
    </div>
    <!-- footer -->
    <div data-role="footer" data-position="fixed" data-theme="d" class="ui-bar">
<a href="#about" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="flip" data-icon="info" data-theme="e">About</a>

    </div>
    <!-- About Author Popup -->
    <div data-role="popup" id="about" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:300px;" class="ui-corner-all"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

        <div data-role="header" class="ui-header ui-bar-c">
             <h1>About Author</h1>

        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <p>Demonstration was created by <b>Omar</b> for <a href="#">StackOverflow.com</a>.
                <br/>
                <br/>For more examples on jQuery Mobile, click the button below.</p> <a href="http://stackoverflow.com/users/1771795/omar" data-role="button" data-theme="c" target="_blank">Profile</a>

        </div>
    </div>
    <!-- /About -->
</div>

JavaScript

// Check #chkBox2 by default
$('#chkBox2').prop('checked', true).checkboxradio('refresh')
// Uncheck #chkBox2 when #chkBox1 is checked
$("#chkBox1").on('click', function () {
    if ($(this).is(":checked")) {
        $('#chkBox2').prop('checked', false).checkboxradio('refresh');
    }
});