https://stackoverflow.com/questions/47355806/checkbox-checked-not-toggling-correctly

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tbody>
  <!-- ko foreach: Group-->
  <tr>
    <td>
      <span data-bind="text: TourName "></span>
    </td>
    <!-- ko if: $index() == 0 -->

    <td style="vertical-align:middle" data-bind="attr: { rowspan: $parent.Group().length }">

      <!-- ko if: $parent.Status() != 'DNB' -->
      <input type="checkbox" data-bind="checked: ($parent.Status() === 'CHECK'),click: $root.editSellStatus.bind($parent)" />
      <span data-bind="text: $parent.Status()"></span>
      <!-- /ko -->
    </td>

    <!-- /ko -->
  </tr>
  <!-- /ko -->
  </tbody>
</table>
<span data-bind="text: ko.toJSON(Status)"></span>

JavaScript

//This is my edit method:
editStatus = function() {
  var Status = null;

  if (this.Status() == 'CHECK') {
    this.Status(null);
    Status = null;
  } else if (this.Status() == null) {
    this.Status('CHECK');
    Status = 'CHECK';
  }
	
  //$.ajax()
  
  var test = this.Status();
  return true;
}

//My KO model structure is something like this.
function MyClass() {
	var self = this;
  this.Name = "Name";
  this.Id = "Id";
  this.year = 1999;
  this.Status = ko.observable(null);
  this.isChecked = ko.observable(false);
  this.Group = ko.observableArray([{
    GroupName: "Group 1",
    TourName: "Tour 1",
    Status: "Status",
    subGroup: [{
      //empty object
    }],
  }, {
    GroupName: "Group 2",
    TourName: "Tour 2",
    subGroup: [{
      //empty object
    }]
  }
  ]);

  this.editSellStatus = editStatus;
}

ko.applyBindings(new MyClass());