• js 动态控制 input 框 的只读属性


    需求:

      当下拉框的值为06即Voucher时, 文本框才可输入, 其他情况均为置灰不可录入状态.

    问题:

      设置input框的只读属性写成了readonly="true" 尼玛,坑死我了.下面才对: readonly="readonly"

    <td>
        Payment Mode
        <select id="paymentMode" name="paymentMode" style=" 155px" onchange="changeStyle()">
            <option selected value="">-请选择-</option>
            <option value="01">Cash</option>
            <option value="02">Credit</option>
            <option value="03">Debit</option>
            <option value="04">Nets</option>
            <option value="05">Cheque</option>
            <option value="06">Voucher</option>
            <option value="90">PresetCredit</option>
        </select>
    </td>
    <td align="right">
        Voucher Number
        <input class="inuptxt ac_input" type="text" id="payNo" name="payNo" readonly="readonly">
    </td>
    <script>
    
        //初始化voucherNo文本框
        $(document).ready(function () {
            var payNo = $("#payNo");
            payNo.attr("readOnly","true");
            payNo.css('background-color','#DEDEDE');
        });
    
        //voucherNo样式
        function changeStyle(){
            var paymentMode = $("#paymentMode").val();
            // $("#payNo").css('background-color','#DEDEDE');//没毛病
            var payNo = $("#payNo");
            if(paymentMode!='06'){//没毛病
                payNo.attr("readOnly","true");
                payNo.css('background-color','#DEDEDE');
            } else {
                payNo.attr("readOnly",false);
                payNo.css('background-color','#FFFFFF');
            }
        }
    
    </script>

    以下内容为转载:

    input 框的只读属性:  readonly

    在页面中直接添加为只读时,可在input中直接添加   readonly="readonly",但是如果想通过点击按钮来改变的话,需要通过js(或jquery)来实现。

    最近一次使用这个,终于发现了以前写这个js控制的时候为什么总是那么郁闷了,原来,js  在对于readonly、disabled等属性设置时,有一个小bug(至少我是这么认为):首先,document.getElementById("id").readonly = "true";  设置input为只读,但是,当通过document.getElementById("id").readonly="false"  来去掉只读属性时,没有作用,此时,需要把  false  外面的引号给去掉js语句才能正常工作。

    附:

    1. jquery  通过id属性设置与取消只读属性

    设置只读:$("#id").attr("readOnly","true");

    取消只读:$("#id").attr("readOnly",false);//注意false不带引号!!!

    2. jquery  批量设置与取消只读属性

    /*   id为sa的div中,所有input框   */

    设置只读:$("#sa input").attr("readOnly","true");

    取消只读:$("#sa input").attr("readOnly",false);

    感谢:https://blog.csdn.net/katherine119/article/details/39154615

  • 相关阅读:
    Git 码云操作
    多线程基础必要知识点!看了学习多线程事半功倍(转)
    Spring技术内幕:设计理念和整体架构概述(转)
    单例模式你会几种写法?(转)
    Linux-看完这篇Linux基本的操作就会了(转)
    每天一个linux命令9之crontab 定时任务
    在linux下给grep命令添加颜色
    springmvc使用StringHttpMessageConverter需要配置编码
    MySQL 中的 base64 函数
    spirng整合rmi
  • 原文地址:https://www.cnblogs.com/yadongliang/p/9241378.html
Copyright © 2020-2023  润新知