JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<button data-bind="enable: buttonsEnabled">Button1</button>
<button data-bind="enable: buttonsEnabled">Button2</button>
<button data-bind="enable: buttonsEnabled">Button3</button>

<br /><br />
<label>
    <input type="checkbox" data-bind="checked: buttonsEnabled" />
    Enable buttons
</label>
<br /><br />
<button id="enableButtons" data-bind="click: enableButtons">Enable Buttons</button>
<button id="disableButtons" data-bind="click: disableButtons">Disable Buttons</button>

CSS

body
{
    font-family: Arial;
}

JavaScript

// Enable & Disable Binding

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    this.buttonsEnabled = ko.observable(true);
    
    this.enableButtons = function(){
        self.buttonsEnabled(true);
    };
    
    this.disableButtons = function(){
        self.buttonsEnabled(false);
    };
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
});