I've already asked a question I tried all the code that was passing me and nothing, and was marked as duplicate, however as can be seen in the code below does not work as desired.
function DemoItem(id, name) {
var self = this;
self.id = ko.observable(id);
self.Name = ko.observable(name);
self.Selected = ko.observable(false);
}
function ViewModel() {
var self = this;
self.availableItems = ko.observableArray();
self.associatedItemIds = ko.observableArray();
self.init = function () {
self.availableItems.push(new DemoItem(1, 'One'));
self.availableItems.push(new DemoItem(2, 'Two'));
self.availableItems.push(new DemoItem(3, 'Three'));
self.availableItems.push(new DemoItem(4, 'Four'));
self.availableItems.push(new DemoItem(5, 'Five'));
};
self.toggleAssociation = function (item) {
if (item.Selected() === true) console.log("dissociate item " + item.id());
else console.log("associate item " + item.id());
item.Selected(!(item.Selected()));
return true;
};
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
function marcaDesmarca(caller) {
var checks = document.querySelectorAll('input[type="checkbox"]');
for(let i = 0; i < checks.length; i++) {
checks[i].checked = checks[i] == caller;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>AvailableItems:<tabledata-bind="foreach: $root.availableItems">
<tr><td><input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation" onclick="marcaDesmarca(this)"/>
<span data-bind="text: ' ' + Name()"></span>
</td></tr>
</table>
<br/>
Associated Item Ids:
<div data-bind="foreach: $root.associatedItemIds">
<span data-bind="text: $data"></span>
<br/>
</div>In my code I'm trying this way but it's still in error:
ko.bindingHandlers.isSelected = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
$(element).checked = false;
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
if ($(element).is(':checked')) {
//Desmarca os demais checkbox que estão na mesma tabela que o checkbox clicado
$(element).closest('table').find(':checkbox').not(element).prop('checked', false);
//Atribui o valor 0 para o select que esteja na mesma tabela que o checkbox clicado
$(element).closest('table').find('select').prop('value', 0);
}
}
};