JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>


<div data-bind="foreach: items">
    <input data-bind="checked: value" type="checkbox" />
</div>

JavaScript

ko.dirtyFlag = function(root, isInitiallyDirty) {
    var result = function() {},
        _initialState = ko.observable(ko.toJSON(root)),
        _isInitiallyDirty = ko.observable(isInitiallyDirty);

    result.isDirty = ko.computed(function() {
        return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
    });

    result.reset = function() {
        _initialState(ko.toJSON(root));
        _isInitiallyDirty(false);
    };

    return result;
};

ViewModel = function(data) {    
    ko.mapping.fromJS(data, {}, this);
    this.dirty = ko.dirtyFlag(this.items, false);
    this.dirty.isDirty.subscribe(this.onDirty, this);
};

ViewModel.prototype = {
    onDirty: function() {
        console.log("Post here");
        this.dirty.reset();
    }
};


var data = { items: [{ value: false }, { value: true }, { value: false }, { value: false }, { value: true }, { value: false }]}

ko.applyBindings(new ViewModel(data));