Disable "Browse" button if the radio button isn't selected

Question

<form action="" method="post" name="site_avatar" id="avatar" enctype="multipart/form-data">
<input type="radio" name="avatar" value="gravatar" />
<input type="radio" name="avatar" value="local" />
<input size="25" name="file" type="file" />
<input name="site_avatar" type="submit" value="Submit" />
</form>

This is my form with two radio buttons and one image upload field. I want to keep the "Browse" button disabled if the second radion button isn't selected (with the value "local").

Can anyone please help?

Answer 1

[See it in action]

Javascript

var form = document.getElementById("avatar");
var second = form.getElementsByTagName("input")[1];
var file = document.getElementById("file");

form.onchange = function() {
  if (second.checked) {
    file.disabled = false;
  } else {
    file.disabled = "disabled";
  }
};

HTML

<input size="25" name="file" id="file" type="file" />

I would suggest you revisiting the names & ids in the form btw, because they are kinda messed up. :)