zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    vuesocket.io在单文件中使用(进入到单文件再发请求)
    el-tree设置默认展开及选中
    Vue项目中解决跨域问题
    echarts堆叠条形图计算总数()
    原生js实现点击目标区域外侧触发事件
    js构造树形菜单
    wangEditor服务器上传图片(Vue使用)
    webpack(6) 打包多页应用和sourcemap 使用
    NoSql相关
    Markdown
  • 原文地址:https://www.cnblogs.com/pypua/p/12128898.html
Copyright © 2011-2022 走看看