function FormField(data) { var self = this; self.Name = ko.observable(data.Name); self.Type = ko.observable(data.Type); self.Options = ko.observableArray(data.Type !== 'text' ? data.Options : []); self.Default = ko.observable(data.Default); if (self.Type() === 'Yes/No') { this.Default.subscribe(function(newValue) { console.log(newValue); }); } } function ViewModel(data) { var self = this; self.Fields = ko.observableArray(ko.utils.arrayMap(data, function(item) { return new FormField(item); })); self.HiddenElements = ko.observableArray([]); self.Default = ko.observable(); } ko.applyBindings(new ViewModel([{ Name: "Test", Type: "Yes/No", Options: [{ name: "Yes" }, {name: "No" }], Default: "" }]));

 input[type=radio] { display: none; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div data-bind="foreach: Fields"> <!--ko if: $parent.HiddenElements().indexOf(Name()) == -1 --> <div><b type="text" data-bind="text: Name"></b>:</div> <!--ko if: Type() == "Yes/No"--> <div data-bind="foreach: Options"> <label data-bind="css:$data.name == 'Yes' ? 'btn btn-success fa fa-circle-o' : 'btn btn-danger fa fa-circle-o'"> <input type="radio" value="cherry" data-bind="value: $data.name ,checked: $parent.Default" /> <span data-bind="text: $data.name"></span></label> </div> <!--/ko--> <!--/ko--> </div>