Checkbox and button

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<input id="inUse" type="checkbox" data-bind="checked: inUse"/>
<input id="test" type="checkbox" data-bind="enabled: true" />

<input id="endDate" data-bind="value: endDate, readonly: !inUse(), click: endDateClick"/>

CSS

/* Make visible when the control is disabled */
input[readonly] {
    background-color: #EEE;
}

JavaScript

// Add new binding handler for readonly
ko.bindingHandlers['readonly'] = {
    'update': function (element, valueAccessor) {
        var value = !!ko.utils.unwrapObservable(valueAccessor());
        if(value !== element.readOnly)
            element.readOnly = value;
    }
};

var vm = (function() {
    var inUse = ko.observable(false);
    var endDate = ko.observable(null);
    var endDateClick = function() {
        console.log('Clicked!');
        if (!inUse()) inUse(true);
    };
    return {
        inUse: inUse,
        endDate: endDate,
        endDateClick: endDateClick
    }
})();

ko.applyBindings(vm);