Perchè non mi funziona?

[AyeyeBrazorv]

Ho questo problema:
ho un form di registrazione... con 2 campi e poi un campo select e dopo questo campo select altri 3 campi select.
Apparte che in teoria vorrei che i 3 successivi alla select non siano cliccabili e invece sono tutti cliccabili...
Ma poi vorrei pure che se io clicco il primo campo della prima select (ha 2 campi) mi si cancellino le ultime 2 select mentre se clicco sul secondo campo della prima selec posso cliccare solo la prima select successiva. Ecco il codice:

<form name=\"eventi\">Inserire l'evento accaduto:



                            <table border=\"1\">

    <tr> 

    <td align=\"center\">Scegli:</td>

    <td align=\"center\">

    <select name=\"tipo\" onChange=\"interattivo()\">

    <option value=\"0\">----------</option>

    <option value=\"1\">Opzione1</option>

    <option value=\"2\">Opzione2</option>

    </select>

    </td>

    </tr>

    <tr> 

    <td align=\"center\">Select1</td>

    <td align=\"center\">

    <select id=\"1\">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    </select>

    </td>

    <tr> 

    <td align=\"center\">Select2:</td>

    <td align=\"center\">

    <select id=\"2\">

    <option>B</option>

    <option>C</option>

    <option>D</option>

    </select>

    </td>

    </tr>

    <td align=\"center\">Select3:</td>

    <td align=\"center\">

    <select id=\"3\">

    <option>A</option>

    <option>E</option>

    <option>I</option>

    </select>

    </td>

    </tr>

    </tr>

    </table>

                            </form> 

La funzione javascript è la seguente:

function interattivo(){

        var mytest = eventi.tipo.selectedIndex;

        for(i=1;i<=2;i++){

            document.getElementById(i).disabled=true;    

        }

        if(mytest>0)

        document.getElementById(mytest).disabled=false;

        if(mytest==2){

        var id= 3;

        document.getElementById(id).disabled=false;

        }    

    } 

Dove sbaglio?