JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.4.0.js"></script>
<div class="form-group">
  Single out of collection radio
  <p>
    <label>
      <input type="radio" name="MyChoice" value="Yes" data-bind="checkedWithInit: MyChoiceValue" /> Yes</label>
    <label>
      <input type="radio" name="MyChoice" value="No" data-bind="checked: MyChoiceValue" checked="checked" /> No</label>
  </p>
</div>


<div id="assets_pension_collection_assets_0" class="collection-item">


  <div class="col-md-6" data-bind="visible: havePension('assets_pension_collection_assets_0_type')">

    <div class="form-group required">
      <label class="radio control-label required">In Payment?</label>
      <div class="input-group">
        <div class="required radio radio-inline">
          <input type="radio" id="assets_pension_collection_assets_0_inPaym_0" name="assets_pension_collection[assets][0][inPaym]" required="required" data-bind="checkedWithInit: inPaym" value="Yes" checked="checked">
          <label for="assets_pension_collection_assets_0_inPaym_0">
            Yes</label>
        </div>
        <div class="required radio radio-inline">
          <input type="radio" id="assets_pension_collection_assets_0_inPaym_1" name="assets_pension_collection[assets][0][inPaym]" required="required" data-bind="checkedWithInit: inPaym_0" value="No">
          <label for="assets_pension_collection_assets_0_inPaym_1">
            No</label>
        </div>
        <div class="status"><i class="icon"></i></div>
      </div>
    </div>
  </div>

  <div class="form-group  required">
    <label class="control-label required" for="assets_type_c">Assets on change</label>
    <div class="input-group">
      <div class="input-group-addon"><i class="icon-arrow-combo"></i></div>
      <select id="assets_type_c" name="assets[type_c]" required="required" class="form-control form-control" data-bind="event: { change: chooseAsset }">
        <option value="">Please choose asset</option>
       ...

JavaScript

var ViewModel = function() {
  var self = this;
  self.MyChoiceValue = ko.observable();

      self.chooseAsset = function(viewModel, event) {
        var currId = event.target.id,
            currValue = event.target.value;
        if (currValue.length > 0) {
            if (self.assets.indexOf(currId) == -1) {
                self.assets.push(currId);
            }
        } else {
            if (self.assets.indexOf(currId) > -1) {
                self.assets.splice(self.assets.indexOf(currId), 1);
            }
        }
    };
    self.haveAsset = function(id) {
        return (self.assets.indexOf(id) > -1);
    };

    self.setChecked = function(viewModel, event) {
        var currId = event.target.id,
            currValue = event.target.value;
        if (currValue.length > 0) {
            if (self.checked.indexOf(currId) == -1) {
                self.checked.push(currId);
            }
        } else {
            if (self.checked.indexOf(currId) > -1) {
                self.checked.splice(self.checked.indexOf(currId), 1);
            }
        }
    };
    self.isChecked = function(id) {
        return (self.checked.indexOf(id) > -1);
    };

    /** PENSION  */
    self.choosePension = function(viewModel, event) {
        var currId = event.target.id,
            currValue = event.target.value;

        var pos = self.pension().findIndex(function(obj){
            return obj.id == currId;
        });

        if (currValue.length > 0) {
            if(pos == -1) {
                self.pension.push({id: currId, value: currValue});
            }else{
                self.pension.splice(pos, 1);
                self.pension.push({id: currId, value: currValue});
            }
        } else {
            if(pos > -1) {
                self.pension.splice(pos, 1);
            }
        }
    };
    self.havePension = function(id) {
        var result = self.pension().filter(function(obj) {
            return obj.id === id;
        });

        return...