一个灰常灰常简单的js问题-动态设置文本框的属性

呐。先上代码再说话。
<table>
      <tr>
        <td>营销类型：
        <input type="radio" name="rad1" id="community"/>小区
        <input type="radio" name="rad1" id="community"/>广场
        </td>
        <td>小区名称：<input id="com"/></td>
      </tr>
      <tr>
      <td></td>
        <td>辐射小区：<input id="squ"/></td>
      </tr>
</table>问题是：小区被选中后，小区名称文本框正常，辐射小区文本框变成不可用（或readonly），
        广场被选中后，辐射小区文本框正常，小区名称文本框变成不可用（或readonly），
该怎么办？是用js吗？如何实现？求教

解决方案 »

  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> New Document </title>
     <style>
     *{padding:0;margin:0;} 
     </style>
     
     
     </head><body>
    <table>
          <tr>
            <td>营销类型：
            <input type="radio" name="rad1" id="community"/>小区
            <input type="radio" name="rad1" id="community"/>广场
            </td>
            <td>小区名称：<input id="com"/></td>
          </tr>
          <tr>
          <td></td>
            <td>辐射小区：<input id="squ"/></td>
          </tr>
    </table>
    <script>
    var rad = document.getElementsByName('rad1'),arr = ['com','squ'];

    for(var i = 0; i < rad.length; i++){
    !function(i){

    rad[i].onclick = function(){
    for(var j = 0; j < rad.length; j++){
    document.getElementById(arr[j]).disabled = false;
    }
    if(this.checked){
    document.getElementById(arr[i]).disabled = true;
    }
    };
    }(i)
    }
    </script>
    </body>
    </html>
      

  2.   

      <table>
          <tr>
            <td>营销类型：
           <input type="radio" name="rad1" id="community" onclick="test(1)" />小区
            <input type="radio" name="rad1" id="community" onclick="test(2)" />广场        </td>
            <td>小区名称：<input id="com"/></td>
          </tr>
          <tr>
          <td></td>
            <td>辐射小区：<input id="squ"/></td>
          </tr>
    </table><script>
    function test(flag)
    {
    var obj1=document.getElementById("com");
    var obj2=document.getElementById("squ");
       
      if(flag==1)
      {
        obj1.disabled=true;
    obj1.value="";
        obj2.disabled=false;
      }else
      {
        obj1.disabled=false;
        obj2.disabled=true;
    obj2.value="";  }
    }
    </script>