三个按钮和三个不同的form的切换

我的意思是~我现在有3个按钮 和3个不同的form按第一个按钮的作用是使得第二个和第三个form只读，~按第二个按钮使得第一个和第三个form只读，按第三个按钮使得第一个和第二个form只读~类似于切换~能帮忙回答下吗？谢谢

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //禁用指定表单的所有元素
    function disableForm(id) {
    var f = document.getElementById(id);
    var obj = f.getElementsByTagName('input');
    for(var i = 0; i < obj.length; i ++) obj[i].disabled = true;
    }
    window.onload = function() {
    disableForm('f1');
    disableForm('f2');
    var btn = document.getElementsByTagName('button');
    for(var i = 0; i < btn.length; i ++) {
    btn[i].onclick = function() {
    disableForm('f1');
    disableForm('f2');
    disableForm('f3');
    var obj = document.getElementById('f' + this.value).getElementsByTagName('input');
    for(var i = 0; i < obj.length; i ++) obj[i].disabled = false;
    }
    }
    }
    </script>
    </head><body><button type="button" value="1">使用表单1</button><button type="button" value="2">使用表单2</button><button type="button" value="3">使用表单3</button>
    <form id="f1">
    <input type="text" value="表单1" />
    <input type="submit" value="提交" />
    </form>
    <form id="f2">
    <input type="text" value="表单2" />
    <input type="submit" value="提交" />
    </form>
    <form id="f3">
    <input type="text" value="表单3" />
    <input type="submit" value="提交" />
    </form>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $(":button").eq(0).click(function(num){
    reback();
    $("form[name='form2'],form[name='form3']").children("input").attr("disabled","disabled").end().children("select").attr("disabled","disabled");
    });
    $(":button").eq(1).click(function(num){
    reback();
    $("form[name='form1'],form[name='form3']").children("input").attr("disabled","disabled").end().children("select").attr("disabled","disabled");
    });
    $(":button").eq(2).click(function(num){
    reback();
    $("form[name='form2'],form[name='form1']").children("input").attr("disabled","disabled").end().children("select").attr("disabled","disabled");
    });

    function reback(){
    $("form").children("input").removeAttr("disabled").end().children("select").removeAttr("disabled");
    }
    });
    </script>
    </head><body>
    <input type="button" name="button1" value="按钮1">
    <input type="button" name="button2" value="按钮2">
    <input type="button" name="button3" value="按钮3">

    <form name="form1">
    表单1<input type="text">
    表单1<input type="checkbox">vv
    表单1<input type="button" value="123">
    <select>
    <option>123</option>
    </select>
    </form>
    <form name="form2">
    表单1<input type="text">
    表单1<input type="checkbox">vv
    表单1<input type="button" value="123">
    <select>
    <option>123</option>
    </select>
    </form>
    <form name="form3">
    表单1<input type="text">
    表单1<input type="checkbox">vv
    表单1<input type="button" value="123">
    <select>
    <option>123</option>
    </select>
    </form>
    </body>
    </html>
    这个绝对可以用