JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<div id="radio-group">
  <label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
  <label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>

  <label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
  <label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>


  <label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
  <label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>
</div>

JavaScript

const type = document.querySelector("#type");
const radios = document.querySelectorAll("#radio-group input[type=radio]");

function toggleDisabled() {
  radios.forEach(r => r.disabled = r.name !== type.value);
}

type.addEventListener("change", toggleDisabled);

toggleDisabled();