ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jquery设置input不可编辑,背景变灰,鼠标变禁止

2020-01-01 15:00:46  阅读:399  来源: 互联网

标签:jquery attr onfocus nbsp receiptNo input 变灰 id css


先看效果

$("#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>

 

标签:jquery,attr,onfocus,nbsp,receiptNo,input,变灰,id,css
来源: https://www.cnblogs.com/pypua/p/12128898.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有