KnockoutJS - Enable Binding

This binding is used to enable certain DOM element based on specified condition. This is useful with form elements such as input, select, and textarea.
Syntax
enable: <binding-value>

Parameters
Parameter consists of Boolean like value which decides whether the element should be enabled or not. Element is enabled, if the parameter is true or true like value.
Parameter consists of Boolean like value which decides whether the element should be enabled or not. Element is enabled, if the parameter is true or true like value.
Non-Boolean values are considered as loosely Boolean values. Meaning 0 and null are considered as false-like value, and Integer and non null objects are considered as true-like value.
Non-Boolean values are considered as loosely Boolean values. Meaning 0 and null are considered as false-like value, and Integer and non null objects are considered as true-like value.
If the condition in the parameter contains any observable value, then the condition is re-evaluated whenever observable value changes. Correspondingly, related markup will be enabled based on the condition result.
If the condition in the parameter contains any observable value, then the condition is re-evaluated whenever observable value changes. Correspondingly, related markup will be enabled based on the condition result.
Example
Let us take a look at the following example which demonstrates the use of enable binding.
<!DOCTYPE html>
   <head>
      <title>KnockoutJS Enable Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p> Enter your feedback here:<br><br>
         <textarea rows = 5 data-bind = "value: hasFeedback, 
            valueUpdate: 'afterkeydown'" ></textarea>
      </p>
      
      <p><button data-bind = "enable: hasFeedback">Save Feedback</button></p>

      <script type = "text/javascript">
         function ViewModel () {
            hasFeedback = ko.observable('');
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in enable-bind.htm file.
Save the above code in enable-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
The save button is enabled only when the user has entered a feedback.
The save button is enabled only when the user has entered a feedback.
 Enter your feedback here:

Save Feedback
You can also use a random expression to decide whether the element should be enabled or not.
Example
Let us take a look at the following example which demonstrates the use of random expression to invoke enable binding.
<!DOCTYPE html>
   <head>
      <title>KnockoutJS Enable binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Below button will be enabled only when product stock is available.</p>
      <button data-bind = "enable: productStock() > 0 ">
         Product Details
      </button>

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(-10);
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>
Output
Let's carry out the following steps to see how the above code works −
Save the above code in enable-random-bind.htm file.
Save the above code in enable-random-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
The Product Details button is enabled only when the product stock is available.
The Product Details button is enabled only when the product stock is available.
Below button will be enabled only when product stock is available.

    38 Lectures 
     2 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page