JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<form  id='picker'>
  Group1:<input type='radio' name='group1' value='one'/><br/> 
  Group2:<input type='radio' name='group1' value='two'/><br/> 
  Group3:<input type='radio' name='group1' value='three'/><br/> 
  </br>
  <input type='text' id='intext'/>
  <input type='text' id='intext2'/>
  <input type='text' id='intext3'/>
</form>

CSS

:enabled {
  border:4px solid #f00;
  padding: 5px 5px 5px 15px;
}
:disabled{
  border:2px solid #ccc;
}

JavaScript

window.onload = function() {
    document.forms[0].elements['intext'].disabled = true;
    document.forms[0].elements['intext2'].disabled = true;
    document.forms[0].elements['intext3'].disabled = true;

    var radios = document.forms[0].elements['group1'];
    for(var i = 0; i < radios.length; ++i) {
      radios[i].onclick = radiosClicked;
    }
  }
  function radiosClicked() {
    switch(this.value) {
      case 'one':
        document.forms[0].elements['intext'].disabled = false;
        document.forms[0].elements['intext2'].disabled = true;
        document.forms[0].elements['intext3'].disabled = true;
        break;
      case 'two':
        document.forms[0].elements['intext'].disabled = true;
        document.forms[0].elements['intext2'].disabled = false;
        document.forms[0].elements['intext3'].disabled = true;
        break;
      case 'three':
        document.forms[0].elements['intext'].disabled = true;
        document.forms[0].elements['intext2'].disabled = true;
        document.forms[0].elements['intext3'].disabled = false;
        break;
    }
  }