ICheck plugin not working in knockout js checked binding

Question

Html

<div class="col-xs-4">
    <div class="form-group">
        <label>
            <input type="radio" name="r1" 
                   data-bind="checked: EmployeeTypeChecked" 
                   value="FT" class="minimal" />
            Full Time Employee
        </label>
        <label>
            <input type="radio" name="r1" value="DE" 
                   data-bind="checked: EmployeeTypeChecked" class="minimal" />
            Daily Wages
        </label>
        <label>
            <input type="radio" name="r1" value="OD" 
                   data-bind="checked: EmployeeTypeChecked" class="minimal" />
            On demand
        </label>
    </div>
</div>

knockout code

window.employeeApp = {};

window.employeeApp.DataContext = {

    createEmployee: function (data) { 
        return new employeeApp.DataContext.EmployeeModel(data); 
    },

    EmployeeModel: function (data) {
        data = data || {};
        var self = this;

        self.EmployeeTypeChecked = ko.observable(false),

        self.toJs = function () {
            return ko.toJS(self);
        };

        self.toJson = function () {
            return ko.toJSON(self);
        };
    }
}

window.employeeApp.ViewModel = function () {
    var selectedEmploeyee = ko.observable(),

    init = function () {
        selectedEmploeyee(employeeApp.DataContext.createEmployee());
    };

    return {
        init: init,
        selectedEmploeyee: selectedEmploeyee,
   };
}();

ko.applyBindings(employeeApp.ViewModel, $('.page_script')[0]);

employeeApp.ViewModel.init();

If I remove iCheck plugin style it works; with iCheck plugin it doesn't work correctly.

For example refer to this knockout link

Answer 1

you need to create a custom binding...in order to use the iCheck plugin.. with knockout..

ko.bindingHandlers.yourBindingName= {
    init: function (element, valueAccessor) {
        $(element).iCheck({
            checkboxClass: 'icheckbox_minimal-grey',
            increaseArea: '10%'
        });

        $(element).on('ifChanged', function () {
            var observable = valueAccessor();
            observable($(element)[0].checked);
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());   
        if (value) {
            $(element).iCheck('check');            
        } else {
            $(element).iCheck('uncheck');
        }
    }
};

and you can use it like this..

<p>Send me spam: <input type="checkbox" data-bind="yourBindingName: wantsSpam" /></p>

instead of using the knockout "checked" binding

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>

Answer 2

You need to bind event with your radio button like this

ko.bindingHandlers.RadioButton = {
    init: function (element, valueAccessor) {

        $(element).iCheck({
            radioClass: 'Class Name'
        });

        $(element).on('ifChecked', function () {
            var observable = valueAccessor();
            observable.checked(true);

        });
    },
    update: function (element, valueAccessor) {
        var observable = valueAccessor();
    }
};