JSFiddle - React, Tailwind, and code Playground
HTML
<h4> Kjötálegg </h4>
<input type="checkbox" name="meat[]" value="1">Pepperoni <br>
<input type="checkbox" name="meat[]" value="2">Skinka <br>
<input type="checkbox" name="meat[]" value="3">Nautahakk <br>
<input type="checkbox" name="meat[]" value="4">Beikon <br>
<input type="checkbox" name="meat[]" value="5">Auka Pepperoni <br>
<input type="checkbox" name="meat[]" value="6">Kjúklingur <br>
<div class="col-lg-2">
<h4> Ostar </h4>
<input type="checkbox" name="cheese[]" value="7">Gráðostur <br>
<input type="checkbox" name="cheese[]" value="8">Cheddarostur <br>
<input type="checkbox" name="cheese[]" value="9">Extra Ostur <br>
<input type="checkbox" name="cheese[]" value="10">Lítill Ostur <br>
<input type="checkbox" name="cheese[]" value="11">Enginn Ostur <br>
<input type="checkbox" name="cheese[]" value="12">Rjómaostur <br>
<input type="checkbox" name="cheese[]" value="13">Piparostur <br>
<input type="checkbox" name="greens[]" value="14">Græn Papripa<br>
<input type="checkbox" name="greens[]" value="15">Laukur<br>
<input type="checkbox" name="greens[]" value="16">Tómatsneiðar<br>
<input type="checkbox" name="greens[]" value="17">Sveppir<br>
<input type="checkbox" name="greens[]" value="18">Ananas<br>
<input type="checkbox" name="greens[]" value="19">Jalapenos<br>
<input type="checkbox" name="greens[]" value="20">Svartar Ólífur<br>
<input type="checkbox" name="greens[]" value="21">Hvítlaukur<br>
<input type="checkbox" name="greens[]" value="22">Rauðlaukur<br>
<input type="checkbox" name="greens[]" value="23">Spínat<br>
<input type="submit"/>
JavaScript
$(':input').click(function(event) {
var count = 0;
$(':input').each(function () {
if (this.checked)
{
count++;
}
});
if (count > 2)
{
event.preventDefault();
alert('You can only select 2!');
}
});