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: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 data-bind="visible:allVisible">
HELLO!
</div>

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

<label><input name="Test" type="radio" value="none" data-bind="checked: onStage" /> None</label>

JavaScript

var SimpleListModel = function() {
    var self = this;
    self.onStage = ko.observable();



    self.root = ko.computed({
        read: function() {
            return self.onStage() == "root";
        },
        write: function(value) {
            if (value)
                self.onStage("root");
        }
    });
    self.condition = ko.computed({
        read: function() {
            return self.onStage() == "condition";
        },
        write: function(value) {
            if (value)
                self.onStage("condition");
        }
    });
    self.task = ko.computed({
        read: function() {
            return self.onStage() == "task";
        },
        write: function(value) {
            if (value)
                self.onStage("task");
        }
    });
    
    self.none = ko.computed({
        read: function() {
            return self.onStage() == "none";
        },
        write: function(value) {
            if (value)
                self.onStage("none");
        }
    });

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

ko.applyBindings(new SimpleListModel());