JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div class="dev category">
    <label for="html">HTML</label>
    <input type="checkbox" name="html" id="html" data-category='dev'>
    <label for="css">CSS</label>
    <input type="checkbox" name="css" id="css" data-category='dev'>
    <label for="js">JS</label>
    <input type="checkbox" name="js" id="js" data-category='dev'>
  </div>
  <div class="design category">
    <label for="sketch">Sketch</label>
    <input type="checkbox" name="sketch" id="sketch" data-category='design'>
    <label for="figma">Figma</label>
    <input type="checkbox" name="figma" id="figma" data-category='design'>
    <label for="xd">XD</label>
    <input type="checkbox" name="xd" id="xd" data-category='design'>
  </div>
</form>

JavaScript

console.clear();

const allInputs = document.querySelectorAll('input');
var currentCategory;

function reset(current, numOfInputs){
	var inputs = document.querySelector('.' + current).querySelectorAll('input');
  var checkedInputs = 0;
	for(var i = 0; i < inputs.length; i++){
  	if(inputs[i].checked){
    	checkedInputs++
    }
  }
  if(checkedInputs === 0){
  	 for(var i = 0; i < allInputs.length; i++){
  		allInputs[i].removeAttribute('disabled');
  	}
  }

}

function disableCheck(current){
  var inputsFromCurrentCategory = document.querySelector('.category:not(.' + current + ')').querySelectorAll('input');
  for(var i = 0; i < inputsFromCurrentCategory.length; i++){
  	inputsFromCurrentCategory[i].setAttribute('disabled', 'disabled')
  }
  reset(current, inputsFromCurrentCategory)

}

function callBack(e){
	currentCategory = this.getAttribute('data-category');
	disableCheck(currentCategory)
}

for(var i = 0; i < allInputs.length; i++){
	allInputs[i].addEventListener('change', callBack)
}