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?

CodePudding user response：

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:

Using the 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>

Failed reproduction of the issue:

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