JSFiddle - React, Tailwind, and code Playground

by anzeo

HTML

<div class="radios" data-bind="radioSelect: {value: selected, options: options, enable: isEnabled}"></div>
You selected <span data-bind="text: selected"></span>
Enabled? <input type="checkbox" data-bind="checked: isEnabled"/>

CSS

.radios
{
	border-radius:5px;
	border: 1px solid #CCC;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}

button
	{
		min-width: 0;
		height: 2em;
		line-height: 1em;
		background-color: #FFF;
		float: left;
		text-align: center;
		padding: 0 0.5em;
}
		button:enabled:hover, button.active
		{
			background-color: #4b9fea;
			color: #FFF;
		}

		button:first-child
		{
			border-radius: 5px 0 0 5px ;
		}

		button:last-child
		{
			border-radius: 0 5px 5px 0;
		}

JavaScript

function createRadioSelectButton(option, value){
    var button = document.createElement("button");
    
    button.innerText = option.name;
    button.value = option.value;
    
    ko.applyBindingsToNode(button,{
        click: function(i,e){
            value(button.value);
        },
        css: {
            active: ko.computed(function(){ return value() === button.value;})
        }
    });
    
    return button;
}

ko.bindingHandlers.radioSelect = {
    init: function(element, valueAccessor){
        var parameters = valueAccessor(),
            value = parameters.value,
            options = parameters.options, // in de vorm {value:"", name:""}
            enable = parameters.enable; 
        
        for(var i = 0; i < options.length; i++){
            var button = createRadioSelectButton(options[i], value);
            ko.applyBindingsToNode(button, {
                enable: enable
            });
            element.appendChild(button);
        }
    }
}

ko.applyBindings({
    selected: ko.observable(),
    options: [{value: 1, name: 'One'}, {value: 2, name: 'Two'}, {value: 3, name: 'Three'}],
    isEnabled: ko.observable(true)
});