lundi 28 août 2017

Make the checkbox behave with radiobutton

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