Enabling textboxes

[saranya_arun]

I have 4 radio buttons and 4 text boxes, say for eg: r1, r2, r3 and r4 and t1, t2, t3 and t4 respectively. On load of the page all 4 text boxes will be disabled, when i click on r1, t1 must get enabled. When i click on r2, t2 must be enabled, similarly the other two. This works fine for me. However, when i click r2 only t2 must be enabled and all the other text boxes must be disabled. That is, if i click r1 first (t1 will be enabled) then click r2 (t2 will be enabled in addition to t1 being enabled) i want only t2 being enabled. How do i disabled t1 and enable t2 on the same click?

Can some one help me? :?:

[buddylee17]

You would probably get a better answer if posted in the JavaScript forum. The idea would be to create a function that enabled one textbox while disabling the rest. Replace the word form with the forms name.

<script type="text/javascript">
<!--
function changestate()
{
  if(document.form.r1.checked)
  {
  document.form.t1.disabled='false';
  document.form.t2.disabled='true';
  document.form.t3.disabled='true';
  document.form.t4.disabled='true';
  }
  else if(document.form.r2.checked)
  {
  document.form.t1.disabled='true';
  document.form.t2.disabled='false';
  document.form.t3.disabled='true';
  document.form.t4.disabled='true';
  }
  else if(document.form.r3.checked)
  {
  document.form.t1.disabled='true';
  document.form.t2.disabled='true';
  document.form.t3.disabled='false';
  document.form.t4.disabled='true';
  }
  else if(document.form.r4.checked)
  {
  document.form.t1.disabled='true';
  document.form.t2.disabled='true';
  document.form.t3.disabled='true';
  document.form.t4.disabled='false';
  }
}
// -->
</script>

Then throw in an onlick attribute to call the function.

<input type="radio" name="r1" id="r1"  onclick="changestate()" />

I think this should work. I'm sure there is a better way. If you can't get it to work, repost the problem in the JavaScript forum.