Introduction
In my previous article I told you about mouseover and mouseout Event Binding Using Knockout.
In today's article I will tell you about enabling and disabling binding using Knockout.
Step 1
First of all you need to add an external Knockout js file into your application, you can either download it from the internet or can download my application that is available at the start of this article in Zip Format and then use the file attached with this Zip file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel. To do that you need to add a Script tag under the Body Section and then need to add this code:
<script type="text/javascript">
function x() {
this.isvegetarian = ko.observable(false);
this.vegetarian = ko.observable("Butter Naan With");
this.nonvegetarian = ko.observable("Briyani and");
};
ko.applyBindings(new x());
</script>
As always I had first created a function "x()".
In this function I had created three observables named as isvegetarian, vegetarian, nonvegetarian.
The first Observable, isvegetarian, is set to false because it will be bound with a checkbox and it will become True only when it's checked.
In the next two Observables some default values are provided in which the user can add on or also delete these default value and can provide a fresh value at run time.
Step 3
Until now our work on ViewModel is completed so we can move forward to the view part of our application.
Write this code in the view part:
<div>
<p>
<input type='checkbox' data-bind="checked: isvegetarian" />
<label>I am a Vegetarian</label>
</p>
<p>
<label>Please Provide your list of favorite Vegetarian Food:-</label>
<input type='text' data-bind="value: vegetarian, enable: isvegetarian" />
</p>
<div >
<label>Please Provide your list of favorite Vegetarian Food:-</label>
<input data-bind="value:nonvegetarian, disable:isvegetarian"/>
</div>
</div>
Here first I had taken a checkbox that is bound to "isvegetarian" that was made false, so this checkbox will not be checked at the time when we run our application.
After that the TextBox is used which will be enabled only when the checkbox is in the checked state, also it's bound with the vegetarian observable so it will be holding the default value of the vegetarian observable.
Next I had again taken a TextBox that will allow the user to enter text only when the checkbox is in the unchecked state, also it's bound with nonvegetarian so it will be holding the default value of nonvegetarian.
The complete code of this application is as follows:
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
<input type='checkbox' data-bind="checked: isvegetarian" />
<label>I am a Vegetarian</label>
</p>
<p>
<label>Please Provide your list of favorite Vegetarian Food:-</label>
<input type='text' data-bind="value: vegetarian, enable: isvegetarian" />
</p>
<div >
<label>Please Provide your list of favorite Vegetarian Food:-</label>
<input data-bind="value:nonvegetarian, disable:isvegetarian"/>
</div>
</div>
<script type="text/javascript">
function x() {
this.isvegetarian = ko.observable(false);
this.vegetarian = ko.observable("Butter Naan With");
this.nonvegetarian = ko.observable("Briyani and");
};
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Until now our work is completed and you can run your application to see the output.
Output
On debugging the application you will get output like this:
![diisable binding]()
Now you can see that only the second TextBox is allowed to make entries, and the first TextBox is disabled because the checkbox is unchecked.
![diisable observable binding]()
But now I will check the checkbox and you will see that now the first TextBox will become editable whereas the second TextBox will now become disabled.
![enable binding]()