Knockout - show checkbox based on pick-list selection in a table

Question

I am trying to make a checkbox show/hide based on the picklist selection for each row in a table. The picklist options are displayed correctly but the computed function is not updating the visibility of the check box after changing the option value. Below is my code... can you guys tell me what am i doing wrong.

http://jsfiddle.net/euh926a7/10/

<table width="95%" cellspacing="0" >
                <thead>
                    <tr class="freeze">
                        <th> Employee ID </th>
                        <th> Full Name </th>
                        <th> Leap Leader </th>
                    </tr>
                <tbody data-bind='foreach: staffLists'>
                    <tr>
                        <td data-bind="text: employeeId"></td>
                        <td><select data-bind="options: $parent.positionOptions, optionsText: 'text', optionsValue: 'value', value: position, optionsCaption: 'Select one...',optionsAfterRender: $parent.setOptionDisable"></select></td>
                        <td><input type="checkbox" data-bind="checked : leapLeader, visible : showleap" /></td>
                    </tr>
                </tbody>
            </table>

below is my js

var scLogic = new Array([]);
scLogic.test1 = [false, false, false, ''];
scLogic.test2 = [true, true, true, 'logic'];

function viewModel(){
var self = this;
self.staffLists = ko.observableArray([]);
for(var i=0; i<2;i++)
        self.staffLists.push(new staffModel(i));
self.positionOptions = new Array(
    { value: 'test1', text: 'Testing 1', disable: false},
    { value: '', text: '--- Test 2 ---', disable: true},
    { value: 'test2', text: 'Testing 2', disable: false}
);
self.setOptionDisable = function(option, item) {
    if (!item) return;
    ko.applyBindingsToNode(option, {
        disable: item.disable
    }, item);
};
}

ko.applyBindings(new viewModel());

function  staffModel(i){
var self = this;
self.recordId = 'rec' + i;
self.employeeId = 'emp' + i;
self.position = ko.observable('test' + i);
self.leapLeader = ko.observable(false);
self.showleap = ko.computed(function() {
    return scLogic[self.position] === undefined ? false : 
scLogic[self.position][0];
});
}

Answer 1

Thank you msokrates!

There is a typo in your return statement in the computed: [self.postion]. I also think since this is an observable you should invoke it: [self.position()] to get its value – msokrates