ノックアウトjsでチェックボックスのプロパティチェック値が更新されない

Question

私はKnockout.jsで作業しています。私は3つのチェックボックスとその下にforeachのループがあるページを持っています。そこに、行ごとに3つのチェックボックスであり、私はそれらの一つは、私が行

$("input:checkbox").on('click', function() { 
    debugger; 
    // in the handler, 'this' refers to the box clicked on 
    var $box = $(this); 
    if ($box.is(":checked")) { 
     // the name of the box is retrieved using the .attr() method 
     // as it is assumed and expected to be immutable 
     var group = "input:checkbox[name='" + $box.attr("name") + "']"; 
     // the checked state of the group/box on the other hand will change 
     // and the current value is retrieved using .prop() method 
     $(group).prop("checked", false); 
     $box.prop("checked", true); 
    } else { 
     $box.prop("checked", false); 
    } 
}); 

ごとに一度に一つのチェックボックスを選択し、このjQueryの機能を持っているので、選択する必要がありたかったよう

<div class="form-horizontal" id="ko-bind-element"> 
    <input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" /> 
    <div data-bind="foreach: procedures"> 
     <div data-bind="template: { name: Mode(), data: $data }"></div> 
    </div> 
</div> 
<script type="text/html" id="procedure"> 
    <table class="table table-bordered"> 
     <tr> 
      <td class="col-md-3"><span data-bind="text: Name"></span> 
      </td> 
      <td> 
       <input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: AlreadyCompleted" /> 
      </td> 
      <td> 
       <input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: NotApplicable" /> 
      </td> 
      <td> 
       <input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: CreateNew" /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="4" style="padding:0;"> 
       <div data-bind="if: CreateNew"> 
        <textarea style="margin-top:10px; margin-bottom:10px;" class="col-md-offset-3 col-md-8" data-bind=" value : Text"></textarea> 
        <div class="clearfix"></div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</script> 

：ここに私のコードですしかし、問題は今、私は最初のチェックボックスをチェックし、それをオフにします。その後、2番目のチェックボックスをオンにしてデータを送信します。 1stと2ndの両方のショーがチェックされました。だから、ノックアウトの問題かどうかは分かりません。ここで

はバインディングコードです：

viewModel = { 
    MtocFormID: 0, 
    procedures: ko.observableArray(), 
    dateid: null 
}; 
$(document).ready(function() { 
    var data = JSON.parse($("#serverJSON").val()); 
    viewModel.MtocFormID = ko.observable(data.ID); 
    // viewModel.dateid = ko.observable(data.ExpiryDate) 
    $(data.TemplateProcedure).each(function(index, element) { 
     var mappedItem = { 
      // otherSafetyPro: ko.observableArray([]), 
      VId: ko.observable(element.VId), 
      TemplateID: ko.observable(element.TemplateID), 
      ProcedureTemplateID: ko.observable(element.ProcedureTemplateID), 
      Name: ko.observable(element.Name), 
      AlreadyCompleted: ko.observable(element.AlreadyCompleted), 
      NotApplicable: ko.observable(element.NotApplicable), 
      CreateNew: ko.observable(element.CreateNew), 
      Text: ko.observable(element.Text), 
      Mode: ko.observable("procedure") 
     } 
     viewModel.procedures.push(mappedItem); 
    }); 
    ko.cleanNode(document.getElementById("ko-bind-element")); 
    ko.applyBindings(viewModel, document.getElementById("ko-bind-element")); 
    form08wizard.submitData(getSubmitData); 
}); 

Answer 1

あなたがチェックボックスは、他のチェックボックスを変更し、その後チェックされているかどうかを確認するためにsubscribe機能を使用することができます。また、私はこのようにビューモデルを配置することを好みます。

var singleViewModel = function(element){ 
    var self = this; 
    // self.otherSafetyPro = ko.observableArray([]); 
    self.VId = ko.observable(element.VId); 
    ... 
    self.Completed = ko.observable(element.AlreadyCompleted); 
    self.NotApplicable = ko.observable(element.NotApplicable); 
    self.CreateNew = ko.observable(element.CreateNew); 
    self.Completed.subscribe(function(newValue) { 
    if(newValue) { 
     self.NotApplicable(false); 
     self.CreateNew(false); 
    } 
    }); 
    self.NotApplicable.subscribe(function(newValue) { 
    if(newValue) { 
     self.Completed(false); 
     self.CreateNew(false); 
    } 
    }); 
    self.CreateNew.subscribe(function(newValue) { 
    if(newValue) { 
     self.NotApplicable(false); 
     self.Completed(false); 
    } 
    }); 
} 

そして、これはあなたが

$(data.TemplateProcedure).each(function (index, element) { 
    viewModel.procedures.push(new singleViewModel(element)); 
}); 

に別のサンプルを割り当てる方法です： `checked`プロパティをプログラムで根本的な特性に影響を及ぼさないであろう変更

function ViewModel() { 
 
    var self = this; 
 
    self.optionA = ko.observable(false); 
 
    self.optionA.subscribe(function(newValue){ 
 
    if(newValue) { 
 
     self.optionB(false); 
 
     self.optionC(false); 
 
    } 
 
    }); 
 
    self.optionB = ko.observable(false); 
 
    self.optionB.subscribe(function(newValue){ 
 
    if(newValue) { 
 
     self.optionA(false); 
 
     self.optionC(false); 
 
    } 
 
    }); 
 
    self.optionC = ko.observable(false); 
 
    self.optionC.subscribe(function(newValue){ 
 
    if(newValue) { 
 
     self.optionA(false); 
 
     self.optionB(false); 
 
    } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    var myViewModel = new ViewModel(); 
 
    ko.applyBindings(myViewModel); 
 
});

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

 
<div> 
 
    <input type="checkbox" data-bind="checked: optionA" /> 
 
    <input type="checkbox" data-bind="checked: optionB" /> 
 
    <input type="checkbox" data-bind="checked: optionC" /> 
 
</div>