JQX Checkbox

by Nico D

HTML

<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.arctic.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/styles/jqx.apireference.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/format.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-3.0.0.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<div class="switchRuleLabel">Turn the Rule:</div>
<div class="switchRuleButton">
    <div data-bind="attr: {'id': isActiveSwitch.id }"></div>
</div>
<br />
<div>Binded Checkbox:</div>
<div data-bind="jqxCheckBox: {checked: isActiveSwitch.checked }"></div>

CSS

.jqx-switchbutton-label-on {
    background-color: cornflowerblue;
    color: white;
}

JavaScript

var libSwitch = function () {
    var self = this;
    self.id = ko.observable("test");
    self.checked = ko.observable(false);
    self.checked.subscribe(function (newValue) {
        if (!self.jumpSubscribeCheck()) {
            var item$ = $("#" + self.id());
            if (item$.length > 0) {
                item$.jqxSwitchButton({
                    checked: newValue
                });
            }
        }
    });
    self.jumpSubscribeCheck = ko.observable(false);
    self.initialize = function () {
        var item$ = $("#" + self.id());
        if (item$.length > 0) {
            item$.jqxSwitchButton({
                height: 27,
                width: 81,
                checked: self.checked()
            });
            item$.on('checked', function (event) {
                self.jumpSubscribeCheck(true);
                self.checked(false);
                self.jumpSubscribeCheck(false);
            });
            item$.on('unchecked', function (event) {
                self.jumpSubscribeCheck(true);
                self.checked(true);
                self.jumpSubscribeCheck(false);
            });
        }
    };
    return self;
}

var viewModel = function () {
    this.isActiveSwitch = libSwitch();
};

$(document).ready(function () {
    var vm = new viewModel();
    ko.applyBindings(vm);

    vm.isActiveSwitch.initialize();
});