I have some 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
And some Javascript:
self.Traded_Yes = function(data) {
$("#Page2Symbol").prop("disabled", false);
return true;
};
self.Traded_Yes = function(data) {
$("#Page2Symbol").prop("disabled", true);
return true;
};
Everything works fine on the UI in terms of disabling id: Page2Symbol, and saving the correct data however the UI doesn't show the radio button flipping between Yes/No when I click either radio. I doreturn true in order to allow the default click action as discussed here: https://knockoutjs.com/documentation/click-binding.html , however the UI does not flip the selection when I click either radio. Any ideas what is going on?
Juan Pablo Isaza
I can't reproduce your issue, but might have some good advice to work around the issue you might have:
When working with knockout, it's advised to make all interaction with the DOM go through a knockout binding. For disabling and enabling a button, there are the disable and enable bindings. Here's how you use them:
disable binding:You add a computed property to your viewmodel that defines whether to disable based on the value of Traded.
This ensures you don't need that click-binding and can get rid of any id references.
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>This snippet shows that your original code should work, even though it's a bit of an anti-pattern.
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