Make the checkbox behave like a radiobutton, allowing the checkbox to be deselected. And my select is also part and works the same as the checkbox if the value is greater than 0 the checkbox deselects, if you select a checkbox the select gets 0.
I have such a code in knockoutJS:
var InternalAuditRecordTopic = function (data) {
var self = this;
self.InternalAuditRecordTopicID = ko.observable(data.InternalAuditRecordTopicID);
self.InternalAuditRecordID = ko.observable(data.InternalAuditRecordID);
self.Name = ko.observable(data.Name);
self.Order = ko.observable(data.Order);
self.Request = ko.observable(data.Request);
self.NonComformityType = ko.observable(data.NonComformityType);
self.Comformity = ko.observable(parseInt(data.Comformity));
self.OM = ko.observable(parseInt(data.OM));
self.Observation = ko.observable(data.Observation);
self.Evidences = ko.observable(data.Evidences);
self.startPlaceHolders = function () {
startPlaceHolders();
};
};
.....
ko.cleanNode($("form#internalAuditRecordRegisterForm"));
var viewModel = new InternalAuditRecord(@Html.Raw(Model.ToJson()));
ko.applyBindings(viewModel, document.getElementById("internalAuditRecordRegisterForm"));
And in html:
section class="internalAuditRecordTopicDetail with-margin" data-
index="${$index}">
<input type="hidden" name="InternalAuditRecordTopics[${$index}].Request" value="${Request}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].Name" value="${Name}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].Comformity" value="${Comformity}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].NonComformityType" value="${NonComformityType}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].OM" value="${OM}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].Observation" value="${Observation}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].Evidences" value="${Evidences}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].InternalAuditRecordID" value="${InternalAuditRecordID}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].InternalAuditRecordTopicID" value="${InternalAuditRecordTopicID}" />
<input type="hidden" name="InternalAuditRecordTopics[${$index}].Order" value="${$index}" />
<fieldset class="grey-bg relative internalAuditRecordTopic">
<ul class="mini-menu visible">
<li>@Html.UpIcon(null, new { data_bind = "click: $parent.upInternalAuditRecordTopic", @Title = "Subir Item" })</li>
<li>@Html.DownIcon(null, new { data_bind = "click: $parent.downInternalAuditRecordTopic", @Title = "Descer Item" })</li>
<li>@Html.DeleteIcon(null, new { @Title = "Remover Item", data_bind = "click: $parent.removeInternalAuditRecordTopic" })</li>
</ul>
<legend>
@*<a href="#" data-bind="text: Name"></a>*@
<span>
<input type="text" style="width:300px;" class="internalAuditRecordTopicRequest" placeholder="Requisito" data-bind="value:Request" />
</span>
</legend>
<table class="tg" data-id="${$index}">
<tr>
<td class="tg-yw4l" align="right"><span class="label" style="color:black">Registros da Auditoria: </span></td>
<td><span><textarea cols="65" rows="10" style="width:400px;" class="internalAuditRecordTopicName" placeholder="Nome do tópico" data-bind="value:Name" /></span></td>
</tr>
<tr>
<td class="tg-yw4l" align="right"><span for="active" class="label" style="color:black">Comforme: </span></td>
<td><input type="checkbox" value="1" data-bind="checked:Comformity,isSelectedComformity:" class="float-left" /></td>
</tr>
<tr>
<td class="tg-yw4l" align="right"><span for="active" class="label" style="color:black">Oportunidade de Melhoria: </span></td>
<td><input type="checkbox" value="1" data-bind="checked:OM, isSelectedOM:" class="float-left"/></td>
</tr>
<tr>
<td class="tg-yw4l" align="right"><span class="label" style="color:black">Não Conformidade: </span></td>
<td class="tg-yw4l">
<span id="span_finished">
<select data-bind="value: NonComformityType" id="NonComformityType">
<option value="0" selected>Escolher</option>
<option value="2">Maior</option>
<option value="1">Menor</option>
</select>
</span>
</td>
</tr>
<tr>
<td class="tg-yw4l" align="right"><span class="label" style="color:black">Observações: </span></td>
<td><textarea cols="65" rows="10" style="width:400px;" class="internalAuditRecordTopicObservation" placeholder="Observações" data-bind="value:Observation" /></td>
</tr>
<tr>
<td class="tg-yw4l" align="right"><span class="label" style="color:black">Evidências: </span></td>
<td><textarea cols="65" rows="10" style="width:400px;" class="internalAuditRecordTopicEvidences" placeholder="Evidências" data-bind="value:Evidences" id="Evidences" /></td>
</tr>
</table>
What I've already tried:
ko.bindingHandlers.isSelectedOM = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
if ($(element).is(':checked')) {
$(element).closest('table').find(':checkbox').prop('checked', false);
}
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
if ($(element).is(':checked')) {
$(element).closest('table').find(':checkbox').prop('checked', false);
$(element).closest('table').find('select').prop('value', 0);
}
}
};
Aucun commentaire:
Enregistrer un commentaire