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>