JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
  <p><strong>No:</strong></p>
  <input type="radio" name="no" value="0" checked> Unrestricted
  <input type="radio" name="no" value=1> 1  
  <input type="radio" name="no" value=2> 2  
  <input type="radio" name="no" value=3> 3  
  <input type="radio" name="no" value=4> 4 or more
</form>

<form onclick="sa();">
<div id="rates">
  <input type="radio" id="r1" name="rate" value="0"> X1
  <input type="radio" id="r2" name="rate" value="1"> X2
  <input type="radio" id="r3" name="rate" value="2"> X3
</div>
</form>

<div class="pricing-levels-3">
  <p><strong>Must include:</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> A
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> B
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> C
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> D
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> E
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> F
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> G
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> H
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> I
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> J
</div>

JavaScript

limit=3;
function sa()
{   //var rates = document.getElementsByName('rate');
    limit=2;
    window.alert(limit);
    //if (rates[1].checked) {limit=1;}
    //else if (rates[2].checked) {limit=2;}
    //else if (rates[3].checked) {limit=3;}
    //else {limit=2;}
}
$('input.single-checkbox').on('change', 
function(evt) 
{
  if ($(this).siblings(':checked').length >= limit) {this.checked = false;}
});