Javascript DOM Form element disable via radio button

Description

Javascript DOM Form element disable via radio button

View in separate window 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio Click Pick</title>
<style>
:enabled {/*from  ww w.j  a v  a  2 s .c  o  m*/
    border: 4px solid #ff0000;
    padding: 5px 5px 5px 15px;
}
:disabled {
    border: 2px solid #cccccc;
}
</style>
<script>
window.onload=function() {
  // first, disable all the input fields
  document.forms[0].elements["intext"].disabled=true;
  document.forms[0].elements["intext2"].disabled=true;
  document.forms[0].elements["intext3"].disabled=true;

  // next, attach the click event handler to the radio buttons
  let radios = document.forms[0].elements["group1"];
  for (let i = [0]; i < radios.length; i++)
    radios[i].onclick=radioClicked;
}
function radioClicked() {
  // find out which radio button was clicked and 
  // disable/enable appropriate input elements
  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["intext2"].disabled=false;
       document.forms[0].elements["intext"].disabled=true;
       document.forms[0].elements["intext3"].disabled=true;
       break;
    case "three" :
       document.forms[0].elements["intext3"].disabled=false;
       document.forms[0].elements["intext"].disabled=true;
       document.forms[0].elements["intext2"].disabled=true;
       break;
  }

}

</script>
</head>
<body>
<form id="picker">
Group 1: <input type="radio" name="group1" value="one" /><br />
Group 2: <input type="radio" name="group1" value="two" /><br />
Group 3: <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>
</body>
</html>



PreviousNext

Related