且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

select选择控制input是否可输入

更新时间:2022-01-01 18:39:49

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>  

 



      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/942954,如需转载请自行联系原作者