JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<div class="form-group">
<label class="control-label col-md-2">
Month Assigned
</label>
<div class="col-md-2">
<select class="form-control" data-bind="value: MonthAssigned">
<option value="0">Not Scheduled</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<label class="control-label col-md-2">
Compliance Level
</label>
<div class="col-md-2">
<select class="form-control" data-bind="enable: MonthAssigned() > 0, value: IgnoreCompliance">
<option value="false">Strict</option>
<option value="true">Lenient</option>
</select>
</div>
<label class="control-label col-md-2">
Assign Initially
</label>
<div class="col-md-2">
<select class="form-control" data-bind="enable: MonthAssigned() > 0, value: AssignInitially">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
JavaScript
function vm() {
var self = this;
self.MonthAssigned = ko.observable(0)
self.IgnoreCompliance = ko.observable("false")
self.AssignInitially = ko.observable("false")
self.MonthAssigned.subscribe(value => {
if (Number(value) === 0) {
self.IgnoreCompliance("false").AssignInitially("false");
}
});
}
ko.applyBindings(new vm());