JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <table data-bind="foreach: {data: Groups}">
        <thead>
            <tr>
                <th colspan="3" data-bind="text: GroupName"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: {data: Codes}">
            <tr>
                <td data-bind="text: CodeId"></td>
                <td data-bind="text: Desc"></td>
                <td>
                    <input type="checkbox" data-bind="checked: Prime, disable: $root.HasPrime($parent) && !Prime()" />
                </td>
            </tr>
        </tbody>
    </table>
</section>

JavaScript

var Groups = ko.observableArray();
var code1 = {
    'CodeId': 123,
        'Desc': 'Code 1',
        'Prime': ko.observable(false)
};
var code2 = {
    'CodeId': 234,
        'Desc': 'Code 2',
        'Prime': ko.observable(true)
};
var code3 = {
    'CodeId': 345,
        'Desc': 'Code 3',
        'Prime': ko.observable(false)
};

var codes1 = [code1, code2, code3];
var codes2 = [code1, code3];


var group1 = {
    'GroupName': 'Group 1',
        'Codes': codes1
};
var group2 = {
    'GroupName': 'Group 2',
        'Codes': codes2
};

Groups.push(group1);
Groups.push(group2);

var HasPrime = function (gr) {
    for (var i = 0; i < gr.Codes.length; i++) {
        if (gr.Codes[i].Prime() === true) {
            return true;
        }
    }
    return false;
};

var vm = {
    Groups: Groups,
    HasPrime: HasPrime
};
ko.applyBindings(vm);