Trying to create a checkbox enabling feature with dependencies.
The goal is to enable a checkbox if either of two input fields are not empty.
Check out the JavaScript code below:
var GoogleContactsViewModel = function() {
var _self = this;
_self.GoogleContacts = ko.observable();
_self.IsEnabled = function (item) {
console.log(item);
return item.GivenName.length || item.FamilyName.length;
};
_self.GetData = function() {
$.ajax({
url: "some url",
method: "POST",
success:function (dataFromServer) {
_self.GoogleContacts(dataFromServer);
}
});
};
_self.GetData();
};
ko.applyBindings(new GoogleContactsViewModel());
Here's the HTML:
<table class="importContacts" data-bind="with: GoogleContacts">
<thead>
<tr>
<th></th>
<th>@CommonResource.LastNameColumn</th>
<th>@CommonResource.NameColumn</th>
<th>E-mail</th>
<th>@CommonResource.MyEmployee</th>
</tr>
</thead>
<tbody data-bind="foreach: contacts">
<tr>
<td>
<input type="checkbox" name="isImport" data-bind="value: FullName, enable: $root.IsEnabled($data)" />
</td>
<td>
<input type="text" name="FamilyName" data-bind="value: FamilyName, valueUpdate: 'afterkeydown'" placeholder="@ContactResource.EnterLastName" />
</td>
<td>
<input type="text" name="GivenName" data-bind="value: GivenName, valueUpdate: 'afterkeydown'" placeholder="@ContactResource.EnterName" />
</td>
<td>
<span data-bind="text: Email"></span>
</td>
<td>
<input type="checkbox" name="MyEmployee" value="" />
</td>
</tr>
</tbody>
</table>
It works perfectly for initializing.. View the printscreen here. However, it doesn't work with changes; meaning that after filling in any previously empty field, the checkbox does not enable.