控制select为readonly状态

简单说两种方式，实质是一样的，一种简介明了，一种稍显复杂

实质都是用：

οnmοusemοve="this.setCapture();" οnmοuseοut="this.releaseCapture();" οnfοcus="this.blur();"

这句代码来控制用户无法选择和更改该控件的值

 

一、先说简单的（平时都用简单的，但是有大量select控件需要做readonly处理时用复杂的更简单）

<select  οnmοusemοve="this.setCapture();" οnmοuseοut="this.releaseCapture();" οnfοcus="this.blur();">

<option selected >aaa</option>

<option>bbb</option>

</select>   

二、贴一个复杂的，就是把变化放入js，来实现而已，多时候有用，另外只在脚本控制时候用

// set all input/select/textarea readonly  

function allReadonly(){  

    // input readonly  

    var inputEle = document.getElementsByTagName("input");  

    for(var i=0; i<inputEle.length; i++){  

        inputEle[i].setAttribute("readonly","true",0);  

        inputEle[i].onclick = function setClickFalse(){return false;}  

        inputEle[i].onfocus = function setFocusFalse(){return false;}  

        inputEle[i].onblur = function setBlurFalse(){return false;}  

    }  

    // select readonly  

    var selectEle = document.getElementsByTagName("select");  

    for(var i=0; i<selectEle.length; i++){  

        setReadOnly(selectEle[i]);  

    }  

    // textarea readonly  

    var textareaEle = document.getElementsByTagName("textarea");  

    for(var i=0; i<textareaEle.length; i++){  

        textareaEle[i].setAttribute("readonly","true",0);  

    }  

}  

 

// select readonly  

function setReadOnly(obj){  

    obj.onmouseover = function(){  

        obj.setCapture();  

    }  

    obj.onmouseout = function(){  

        obj.releaseCapture();  

    }  

    obj.onfocus = function(){  

        obj.blur();  

    }  

    obj.onbeforeactivate = function(){  

        return false;  

    }   

}  

 

// select readonly rollback  

function rollBack(obj){  

    obj.onmouseover = function(){  

    }  

    obj.onmouseout = function(){  

    }  

    obj.onfocus = function(){  

    }  

    obj.onbeforeactivate = function(){  

    }   

}

 

另外，对于单个select的readOnly的控制，可以通过jQuery控制，js代码如下：

$("#phone").blur(function(){
  var url = $("#basePath").val() + "/phone/getAreaNew.do";
  var phoneNbr = $("#phone").val();
  if(/^CH/d{9}$/.test(phoneNbr.toUpperCase())){
   $("#regArea").val("sh");
   document.getElementById("regArea").disabled=true;
   $("#regArea").parent("td").append($("<input type='hidden' name='regArea' id ='hidden_regArea'/>").val($("#regArea").val()));
   $("#regArea").attr("name","regArea_");
   return;
  } else {
   document.getElementById("regArea").disabled=false;
   $("#hidden_regArea").remove();
   $("#regArea").attr("name","regArea");
  }
  if(phoneNbr != ""){
   $.ajax({
    type:"post",
    url:url,
    data:"phoneNbr=" + phoneNbr,
    success:function(responseText){
     if(responseText != "" || responseText == "all"){
      $("#regArea").val($("#accessArea").val());
     }else{
      $("#regArea").val(responseText);
     }
    }
   });
  }
 });

响应的jsp代码片段如下：

<form action="" method="post" id="form1">

   <div class="main">
    <table>
     <tr>
      <td align="right" class="label1">账号：</td>
      <td style="height: 30px;">
       <input type="text" id="phone" name="phone" maxlength="11" class="input"/>
      </td>
     </tr>
     <tr>
      <td align="right" class="label1">开户地：</td>
      <td style="height: 30px;">
       <select id="regArea" name="regArea" class="select_other">
                       <option value="all">--开户地--</option>
                       <option value="sh">上海</option>
                      </select>
      </td>
     </tr>
     <tr>
      <td align="right" class="label1">密码：</td>
      <td><input type="password" name="pwd" id="pwd" class="input"/></td>
     </tr>
    </table>
    <div style="margin: auto; text-align: center; margin-top: 15px;">
     <input type="button" id="login_other" name="login_other" class="login" value="登 录"/>
    </div>
   </div>
  </form>