jquery設置input不可編輯，背景變灰，鼠標變禁止

先看效果

$("#id").attr("onfocus", "this.blur()");
$("#id").css("background", "#CCCCCC");
$("#id").css("cursor", "not-allowed");

 

不可編輯有三個方法

第一種是onfocus=this.blur()，這種比下面兩種好，由於連文字也不能選擇

$("#newNoteName").attr("onfocus", "this.blur()");

 

第二種是disabled="disabled"

$("#id").attr("disabled", "disabled");

 

第三種是readonly或者是readonly=「true」

$("#id").attr("readonly", "true");

 

親測實例

js

//當變動類型選擇匯款的時候收據編號是必填項，其餘時收據編號置灰切不可編輯
        function zhihui(type) { if(type==1){ $("#receiptNo").css("background", "#CCCCCC"); $("#receiptNo").attr("onfocus", "this.blur()"); $("#receiptNo").css("cursor", "not-allowed"); }else{ $("#receiptNo").css("background", ""); $("#receiptNo").removeAttr("onfocus") $("#receiptNo").css("cursor", "text"); } }

html

<li class="clear fl pdd">
            <span class="tips2"><span class="red" style="padding-left: 0;">*</span>變動類型:&nbsp&nbsp&nbsp</span>
            <p class="fl">
                 <select id="changeType" name="changeType" onchange="zhihui(this.value)" style="width:167px;">
                    <option value="">請選擇</option>
                     <c:forEach items="${changeTypes }" var="vu">
                         <option value="${vu.dictValue }">${vu.dictName }</option>
                     </c:forEach>
                 </select>
            </p>
        </li>

 <li class="clear fl pdd">
            <span class="tips2"><span class="red" style="padding-left: 0;">*</span>收據編號:&nbsp&nbsp&nbsp</span>
            <p class="Long_mr gray input clear">
                    <span>
                        <input type="text" id="receiptNo" name="receiptNo" class="specialSign"/>
                    </span>
            </p>
        </li>