复选框＆＃34;已检查＆＃34;没有正确切换

Question

当我勾选复选框时，状态变化成功（ajax调用成功，DB反映了chnage），下面的跨度也显示＆＃34; CHECK＆＃34;但是复选框没有被切换，所以某些东西无法正常使用＆＃34;已检查＆＃34;属性。我在这里错过了什么。

<!-- 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 -->

这是我的编辑方法：

self.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({
    url: "SaveStatus/?ID=" + this.Id() + "&Status=" + Status,
    type: "post",
    contentType: "application/json",
    success: function(result) {
      if (result == "success") {}
      self.selectedItem(null);
    }
  });

  var test = this.Status();
}

我的KO模型结构是这样的。

class MyClass {
  Name: string;
  year: string;
  Group: Array<{
    GroupName: string;
    Status: string;
    subGroup: Array<{....}>;
  }>;
}

Answer 1

由于您在复选框上使用了点击绑定，因此您将覆盖默认点击行为，即使用复选标记更新复选框。要允许浏览器继续使用默认行为，您的click事件函数必须返回一个真值。

self.editStatus = function() {
    ...
    return true;
}

＆＃13;

＆＃13;

//This is my edit method:
self.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());

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;