tengo algo de html:
<input name="Test" type="radio" value="yes" data-bind="checked: Page2.Traded, click: Traded_Yes" /> Yes <input name="Test" type="radio" value="no" data-bind="checked: Page2.Traded, click: Traded_No" /> No
Y algo de Javascript:
self.Traded_Yes = function(data) { $("#Page2Symbol").prop("disabled", false); return true; }; self.Traded_Yes = function(data) { $("#Page2Symbol").prop("disabled", true); return true; };
Todo funciona bien en la interfaz de usuario en términos de deshabilitar id: Page2Symbol y guardar los datos correctos; sin embargo, la interfaz de usuario no muestra el botón de opción cambiando entre Sí/No cuando hago clic en cualquiera de las opciones. return true
para permitir la acción de clic predeterminada como se describe aquí: https://knockoutjs.com/documentation/click-binding.html , sin embargo, la interfaz de usuario no cambia la selección cuando hago clic en cualquiera de los radios. ¿Alguna idea de lo que está pasando?
No puedo reproducir su problema, pero podría tener algunos buenos consejos para solucionar el problema que pueda tener:
Cuando se trabaja con knockout, se recomienda hacer que todas las interacciones con el DOM pasen por un enlace de knockout. Para deshabilitar y habilitar un botón, existen los enlaces de disable
y enable
. Así es como los usas:
disable
: Agrega una propiedad computed
a su modelo de vista que define si se deshabilita según el valor de Traded
.
Esto asegura que no necesita ese enlace de clic y puede deshacerse de cualquier referencia de id
.
const self = {}; self.Page2 = { Traded: ko.observable("yes") }; self.disablePage2Symbol = ko.pureComputed(() => self.Page2.Traded() === "yes"); ko.applyBindings(self);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <button data-bind="disable: disablePage2Symbol">Page 2 button</button> <label> <input type="radio" value="yes" data-bind="checked: Page2.Traded" /> Yes </label> <label> <input type="radio" value="no" data-bind="checked: Page2.Traded" /> No </label>
Este fragmento muestra que su código original debería funcionar, aunque es un poco antipatrón.
const self = {}; self.Traded_Yes = function(data) { $("#Page2Symbol").prop("disabled", false); return true; }; self.Traded_No = function(data) { $("#Page2Symbol").prop("disabled", true); return true; }; self.Page2 = { Traded: ko.observable("yes") }; ko.applyBindings(self);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <button id="Page2Symbol">Page 2 button</button> <input name="Test" type="radio" value="yes" data-bind="checked: Page2.Traded, click: Traded_Yes" /> Yes <input name="Test" type="radio" value="no" data-bind="checked: Page2.Traded, click: Traded_No" /> No