First Working Copy

Lengthy Code

by db_dev

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-bind="visible:allVisible" class="outer">
    <div data-bind="visible:root">
        Root = <span data-bind="text: root"></span>
    </div>
    <div data-bind="visible:condition">
        Condition = <span data-bind="text: condition"></span>
    </div>
    <div data-bind="visible:task">
        Task = <span data-bind="text: task"></span>
    </div>
</div>

<label><input name="Test" type="checkbox" value="root" data-bind="checked: root" /> Root</label>
<label><input name="Test" type="checkbox" value="condition" data-bind="checked: condition" /> Condition</label>
<label><input name="Test" type="checkbox" value="task" data-bind="checked: task" /> Task</label>

CSS

.outer {
    border: solid 1px blue;
}

JavaScript

var SimpleListModel = function() {
    var self = this;

    self.root = ko.observable(false);
    self.condition = ko.observable(false);
    self.task = ko.observable(false);


    // Set one to onstage
    self.allVisible = ko.computed({
        read: function() {
            return self.root() || self.condition() || self.task();
        }
    });
};

ko.applyBindings(new SimpleListModel());