jqm testbed

by pkeller3

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<div class="row">
    <div class="col-md-3">
        <input type="checkbox" name="master" id="master" data-mini="true" />
        <label for="master">Controller</label>
    </div>
    <div id="myGroup" class="col-md-4" data-role="controlgroup" data-type="horizontal" data-mini="true">
        <input type="checkbox" name="cblow" id="cblow" />
        <label for="cblow">Low</label>
        <input type="checkbox" name="cbmed" id="cbmed" />
        <label for="cbmed">Med</label>
        <input type="checkbox" name="cbhigh" id="cbhigh" />
        <label for="cbhigh">High</label>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <input type="checkbox" name="master2" id="master2" data-mini="true" />
        <label for="master2">Controller 2</label>
    </div>
    <div id="Div1" class="col-md-4" data-role="controlgroup" data-type="horizontal" data-mini="true">
        <input type="checkbox" name="cblow" id="Checkbox2" />
        <label for="Checkbox2">Low</label>
        <input type="checkbox" name="cbmed" id="Checkbox3" />
        <label for="Checkbox3">Med</label>
        <input type="checkbox" name="cbhigh" id="Checkbox4" />
        <label for="Checkbox4">High</label>
    </div>

JavaScript

$(document).ready(function () {
    $("#myGroup").controlgroup("disable");
    $("#Div1 input").checkboxradio("disable");

    $("#master2").on("click", function () {
        var disabled = $("#Div1 input").first().checkboxradio("option", "disabled");
        $("#Div1 input").checkboxradio((disabled) ? "enable" : "disable");

    });
});