select選擇控制input是否可輸入

 

  1. <html> 
  2. <head> 
  3. <script type="text/javascript"> 
  4. <!-- 
  5. function my_change() 
  6.    if(document.getElementById("select_id").value==0) 
  7.    { 
  8.     document.getElementById("text1").disabled=true
  9.      document.getElementById("text2").disabled=false
  10.       document.getElementById("text3").disabled=true
  11.     document.getElementById("text1").style.backgroundColor="#e9e9e9"
  12.    document.getElementById("text2").style.backgroundColor="#FFF"
  13.    document.getElementById("text3").style.backgroundColor="#e9e9e9"
  14.   } 
  15.   else if(document.getElementById("select_id").value==1) 
  16.    { 
  17.     document.getElementById("text1").disabled=false
  18.      document.getElementById("text2").disabled=true
  19.       document.getElementById("text3").disabled=true
  20.     document.getElementById("text1").style.backgroundColor="#FFF"
  21.    document.getElementById("text2").style.backgroundColor="#e9e9e9"
  22.    document.getElementById("text3").style.backgroundColor="#e9e9e9"
  23.   } 
  24.    else 
  25.    { 
  26.     document.getElementById("text1").disabled=true
  27.      document.getElementById("text2").disabled=true
  28.       document.getElementById("text3").disabled=false
  29.     document.getElementById("text1").style.backgroundColor="#e9e9e9"
  30.    document.getElementById("text2").style.backgroundColor="#e9e9e9"
  31.    document.getElementById("text3").style.backgroundColor="#FFF"
  32.   } 
  33. //--> 
  34.   </script> 
  35. </head> 
  36.  
  37. <body onLoad="my_change();"> 
  38.     <table> 
  39.          <tr> 
  40.          <td> 
  41.              <select id="select_id" name="select_id" onChange="my_change();"> 
  42.                  <option value="0">0</option> 
  43.                  <option value="1">1</option> 
  44.                  <option value="2">2</option> 
  45.              </select> 
  46.             </td> 
  47.          </tr> 
  48.          <tr> 
  49.             <td><input type="text"  id="text1" name="text1"/></td> 
  50.          </tr> 
  51.          <tr> 
  52.             <td><input type="text"  id="text2" name="text2"/></td> 
  53.          </tr> 
  54.          <tr> 
  55.             <td><input type="text"   id="text3" name="text3"/></td> 
  56.          </tr> 
  57.     </table> 
  58. </body> 
  59. </html>  

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章