KnockoutJS - Deshabilitar enlace

Este enlace es la negación de habilitar el enlace. Este enlace deshabilita el elemento DOM asociado cuando el parámetro se evalúa como verdadero.

Sintaxis

disable: <binding-value>

Parámetros

El parámetro consta de un valor booleano, que decide si el elemento debe desactivarse o no. Si el parámetro es verdadero o un valor similar a verdadero, entonces el elemento está deshabilitado.
Los valores no booleanos se consideran valores vagamente booleanos. El significado 0 y nulo se consideran valores de tipo falso y los objetos enteros y no nulos se consideran valores de tipo verdadero.
Si la condición en el parámetro contiene un valor observable, entonces la condición se reevalúa siempre que cambie el valor observable. En consecuencia, el marcado relacionado se deshabilitará según el resultado de la condición.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace de desactivación.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Disable 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 = "disable: !(hasFeedback())">Save Feedback</button></p>

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

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en disable-bind.htm archivo.
Abra este archivo HTML en un navegador.
El botón guardar está deshabilitado cuando el usuario no ha ingresado ningún comentario.

También puede utilizar una expresión aleatoria para decidir si el elemento debe desactivarse o no.

↰ Previous page