チェックボックスが正しくチェックされていない

Question

チェックボックスをオンにすると、ステータスが正常に変更され（Ajaxコールは成功し、DBにはチャネルが反映されます）、下のスパンにも「CHECK」が表示されます。 "checked"属性で正しく動作していません。私はここで何が欠けているのですか？

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のモデル構造は、このようなものです：

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

これは私の編集方法です。

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

Answer 1

あなたがチェックマークの付いたチェックボックスを更新することでデフォルトのクリック動作をオーバーライドしているチェックボックスをクリックバインディングを使用しているので。ブラウザがデフォルトの動作を続行できるようにするには、クリックイベント関数が真の値を返さなければなりません。

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

//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'; 
 
    } 
 
\t 
 
    //$.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());

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