JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<div class="form-group">
  <label>Payment type</label>
  <span dir="none">
    <table id="DisbursementsOrTimeSheet">
      <tbody>
        <tr>
          <td>
            <span class="ms-RadioText" title="Disbursements">
              <input id="DisbursementsOrTimeSheet_ChoiceField0" type="radio" name="DisbursementsOrTimeSheetChoice" value="Disbursements" data-bind="checked: timeSheetSelected">
              <label>A</label>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="ms-RadioText" title="Timesheet">
              <input id="DisbursementsOrTimeSheet_ChoiceField1" type="radio" name="DisbursementsOrTimeSheetChoice" value="Timesheet" checked="checked" data-bind="checked: timeSheetSelected">
              <label>B</label>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </span>
</div>
<div class="form-group" id="expectedCorsContainer" data-bind="visible: timeSheetSelected() === 'Timesheet'">
  <label>Expected charge out rate (£)</label>
  <span dir="none">
    <input type="text" id="ExpectedCORIfTimesheet_CurrencyField" size="11" class="ms-input form-control">
  </span>
</div>

<span data-bind="text: ko.toJSON(timeSheetSelected)"></span>

JavaScript

function K2ConsultantApprovalViewModel() {
  var self = this;
  self.timeSheetSelected = ko.observable("Timesheet");
}


ko.applyBindings(new K2ConsultantApprovalViewModel());