KnockoutJS - Enable Binding

Quiz

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.
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.

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.
Open this HTML file in a browser.
The save button is enabled only when the user has entered a feedback.

Using random expressions to implement enable binding

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.
Open this HTML file in a browser.
The Product Details button is enabled only when the product stock is available.

knockoutjs_declarative_bindings.htm

Print Page