JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="consulting-editors" data-bind="foreach: ConsultingEditors">
    <input type="checkbox" name="Promote" data-bind="checked: Promote, click: $parent.promoterSelectedOnclick" /> Display as main editor 
</div>

JavaScript

function viewModel(){
    var self=this;

    self.ConsultingEditors = ko.observableArray([
    	new NavigatorAuthorApi(true, 1),
      new NavigatorAuthorApi(true, 2),
      new NavigatorAuthorApi(true, 3)
    ]);

    self.promoterSelectedOnclick = function(selectedEditor){
        if (self.ConsultingEditors().some(e => e.Promote())) {
            var others = self.ConsultingEditors().filter(e => e.AuthorRef != selectedEditor.AuthorRef);
            others.forEach((e) => {
                e.Promote(false);
            });
        }
        return true;
    }
}

function NavigatorAuthorApi(promote, authorRef)
{
		var self = this;
  	self.SortOrder = null;
    self.FirmRef = null;
    self.FirmName = null;
    self.AuthorRef = authorRef;
    self.AuthorName = null;
    self.DisplayString = null;
    self.EditorImage = null;
    self.Promote = ko.observable(promote);
}   
    
ko.applyBindings(new viewModel());