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>