Simple javascript question with enable/disable

1

I have a login form and I simply want to disable the username, password and submit button until they check the “I have read the policy” checkbox.

Well I got the username field to be disabled, but the password and login btn are still enabled initially. If I check the box and then uncheck it then everything is disabled.

here is a link so you can see what I am talking about: http://movfactory.com/datron

Here is my javascript:


/*datron form control */
function checkForm() {
if(document.form1.haveRead.checked == false) {
    document.form1.password.disabled = true;
    document.form1.username.disabled = true;
    document.form1.submitbtn.disabled = true;
    } else {
    document.form1.password.disabled = false;
    document.form1.username.disabled = false;
    document.form1.submitbtn.disabled = false;
    }
}

and my form HTML:


<script src="datronform.js" type="text/javascript">checkForm();</script>
............other html crap...................
        <form id="form1" name="form1" method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
          <table width="200" border="0" cellspacing="0" cellpadding="5" align="center">
            <tr>
              <td><label>Username: </label></td>
              <td><input name="username" type="text" id="username" class="inputtxt" size="32"/></td>
            </tr>
            <tr>
              <td><label>Password: </label></td>
              <td><input name="password" type="password" id="password" class="inputtxt" size="32"/></td>
            </tr>
            <tr>
              <td colspan="2"><div align="right">
                  <input type="checkbox" name="haveRead" id="haveRead" onchange="checkForm()" />
              I have read the policy.</div></td>
              <td></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><div align="right">
                <input type="submit" name="Submit" value="Login" id="submitbtn" class="submitbtn" />
              </div></td>
            </tr>
          </table>
        </form>