JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div>
<label class="checkbox-inline">
                    <input data-bind="checked: IsAllowed" id="IsAllowed" name="IsHazmat" type="checkbox" value="true">
                    <span>Allowed</span>
                </label>
                        <label class="checkbox-inline">
                    <input data-bind="checked: IsAllowed2" id="IsAllowed2" name="IsAllowed2" type="checkbox" value="true">
                    <span>Allowed2</span>
                </label>
                        <label class="checkbox-inline">                            
                    <input data-bind="checked: IsGuaranteed" id="IsGuaranteed" name="IsGuaranteed" type="checkbox" value="true">
                    <span>Guaranteed</span>
                    <span class="text-danger" data-bind="visible: Guaranteed">IsAllowed and IsAllowed2 items cannot be guaranteed</span>
                </label>
                            <div>
                                <button data-bind="click: debug">Print 'isGuaranteed'</button>

JavaScript

var ViewModel = function() {
    var self = this;
    
    self.IsAllowed = ko.observable(false),
    self.IsAllowed2 = ko.observable(false),
    self.IsGuaranteed = ko.observable(false),
    
    self.Guaranteed = ko.computed(function() {
        var result;
        result = self.IsGuaranteed() && (self.IsAllowed() || self.IsAllowed2());
        console.log("Computing (computed)");
        if (result) {
            self.IsGuaranteed(false);
        }
        return result;
    }, self);
    
    self.debug = function(){
        console.log("Actual value: " + self.IsGuaranteed())
    }
};

var vm = new ViewModel()

 
vm.IsGuaranteed.subscribe(function (nv) {
    console.log("IsGuaranteed: (assigning) " + nv)
})
ko.applyBindings(vm);