0
私は3つのチェックボックスがある私のページにノックアウトJSを使用しています。チェックボックスのクリックイベントを使用し、チェックボックスのクリックで発生するメソッドを記述しました。そのうまく動作します。ノックアウトjsチェックボックス機能の問題をクリック
Pageが読み込まれたときに、その関数が単独で呼び出しているという問題があります。ここで
は、HTML
<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,click:$root.Test(UID,1)" /></td>
<td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: NotApplicable,click:$root.Test(UID,2)" /></td>
<td><input type="checkbox" data-bind="attr: { name: (VId.length > 0) ? VId : Name },checked: CreateNew,click:$root.Test(UID,3)" /></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>
は今、あなたは私がclickイベントや機能を使用している見ることができている。ここTest あるJSコードが
viewModel = {
MtocFormID: 0,
procedures: ko.observableArray(),
dateid:null
};
function createGuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
$(document).ready(function() {
var data = JSON.parse($("#serverJSON").val());
debugger;
viewModel.MtocFormID = ko.observable(data.ID);
// viewModel.dateid = ko.observable(data.ExpiryDate)
viewModel.Test = function (uID, type) {
var item= ko.utils.arrayFirst(viewModel.procedures(), function (item) {
return item.UID === uID;
});
if (item != null) {
if (type == 1) {
item.AlreadyCompleted(true);
item.NotApplicable(false);
item.CreateNew(false);
}
else if (type == 2) {
item.AlreadyCompleted(false);
item.NotApplicable(true);
item.CreateNew(false);
}
else if (type == 3) {
item.AlreadyCompleted(false);
item.NotApplicable(false);
item.CreateNew(true);
}
}
};
$(data.TemplateProcedure).each(function (index, element) {
var mappedItem = {
// otherSafetyPro: ko.observableArray([]),
UID:createGuid(),
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);
});
$(document).on("click", ".kout-create", null, function (ev) {
addEmpty();
});
ある今、問題はTest方法は、それ自体で呼び出されているということですページの読み込み時にチェックボックスをクリックした場合にのみ起動されます。
$('.checkbox').change(function(){
if (this.checked === true) {
addEmpty();
}
});
もOnChangeHandlerを有効にするチェックボックスにclass="checkbox"を追加します。
現在の状況はありません – Mahajan344
オハイオ州、申し訳ありませんが、私は役に立たないと思います –