JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkboxdiv">
    <input type="hidden" name="Extras" value="">
    <input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/>
    <input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/>
    <input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/>
    <input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/>
    <input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label>
</div>

JavaScript

var currentlyCheckedCount = 0

function disableRemainingCheckboxes() {
  Array.from(document.querySelectorAll('input[type="checkbox"]:not(:checked)')).forEach(function(element) {
    element.disabled = 'disabled'
  })
}

function enableAllCheckboxes() {
  Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(element) {
    element.disabled = undefined
  })

}

Array.from(document.querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) {
  checkbox.addEventListener('change', onCheckboxClick)
})
function onCheckboxClick() {
  if(this.checked) {
    currentlyCheckedCount++
  } else {
    currentlyCheckedCount--
  }
  
  if(currentlyCheckedCount == 2) {
    disableRemainingCheckboxes()
  } else {
    enableAllCheckboxes()
  }
}