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

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

<input class="inuptxt ac_input" type="text" id="tt" name="tt" readonly="readonly">

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

以下写得helloworld:

<script> ???//初始化voucherNo文本框 ???$(document).ready(function () { ???????var voucherNo = $("#voucherNo"); ???????voucherNo.attr("readOnly","true"); ???????voucherNo.css(‘background-color‘,‘#DEDEDE‘); ???}); ???//voucherNo样式 ???function changeStyle(){ ???????var paymentMode = $("#paymentMode").val(); ???????// $("#tt").css(‘background-color‘,‘#DEDEDE‘);//没毛病 ???????var voucherNo = $("#voucherNo"); ???????if(paymentMode!=‘04‘){//没毛病 ???????????voucherNo.attr("readOnly","true"); ???????????voucherNo.css(‘background-color‘,‘#DEDEDE‘); ???????} else { ???????????voucherNo.attr("readOnly",false); ???????????voucherNo.css(‘background-color‘,‘#FFFFFF‘); ???????} ???}</script>

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

原文地址：https://www.cnblogs.com/yadongliang/p/9241378.html