Custom Binding Handler in Knockout

demo.html

    
    
    
    
    
    
    




        

            

                First Name:

                

                Last Name:

                
            


    

viewModel.js

function ProfileViewModel() {
    this.profileClosure = ko.observable(false),
    this.firstName = ko.observable("Alex");
    this.lastName = ko.observable("Xaviar");
}

myViewModel = {
    profileVM: ko.observable(),
    initialize: function () {
        myViewModel.profileVM = new ProfileViewModel();
        ko.applyBindings(myViewModel);
    }
    
}

ko-extensions.js

ko.bindingHandlers.closureMode= {
    init: function (element, valueAccessor) {        
        var shouldClose = valueAccessor();
        if (shouldClose) {
            disableAll(element);
        }
        else
            enableAll();
    },
    update: function (element, valueAccessor, allBindingsAccessor) {        
        var shouldClose = valueAccessor();
        var allBindings = allBindingsAccessor();
        var highlight = allBindings.highlight || false;
        if (shouldClose){
            disableAll(element);
        }
        else
            enableAll(element);

        if (shouldClose && highlight) {
            highlightAll(element);
        }
        else
            setToNormal(element);
    }
};

function disableAll(element) {        
    $(element).find('#firstname').attr('disabled', true);
    $(element).find('#lastname').attr('disabled', true);
}

function highlightAll(element) {    
    $(element).find('#firstname').addClass('highlight');
    $(element).find('#lastname').addClass('highlight');
    
}

function enableAll(element) {
    $(element).find('#firstname').attr('disabled', false);
    $(element).find('#lastname').attr('disabled', false);
}

function setToNormal(element) {
    $(element).find('#firstname').removeClass('highlight');
    $(element).find('#lastname').removeClass('highlight');

    $(element).find('#firstname').addClass('normal');
    $(element).find('#lastname').addClass('normal');
}