JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="header">
    <h1>Sample Item</h1>
    <input tye="text"/>
</div>
<hr/>
<div id="body" data-bind="toggleAll: option, selector: '#body'">
    <input type="checkbox" />
    <input type="textbox" />
    <input type="radio" />
    <select>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
</div>
<div id="footer">
    <button data-bind="click: toggle">Toggle</button>
</div>

JavaScript

ko.bindingHandlers.disableAll = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var aa = allBindingsAccessor();
        var selector = aa.selector;
        var va = valueAccessor();
        var value = ko.utils.unwrapObservable(va);
        if( value )
        {
            $(selector).children().removeAttr('disabled');
        }
        else
        {
            $(selector).children().attr('disabled', 'disabled');
        }
    }
};

function ViewModel() {
    var self = this;
    
    self.option = ko.observable(true);
    
    self.toggle = function() {
        var current = self.option();
        self.option(!current);
    };
}

var vm = new ViewModel();
ko.applyBindings(vm);