点击checkbox文本框置为readonly（仅适用ie）_js checkbox 控制文本 readonly-CSDN博客

本文链接：https://blog.csdn.net/dirful/article/details/4022451

草草做了一个比较丑陋的js，实现如下情况

1.初打开页面，文本框readonly，checkbox未选中，文本框默认值0.0，底色置灰

2.点击checkbox，文本框底色变白，处于可编辑，并将默认值改为输入值提示。

3.此时鼠标onfocus，框内值变空

4.勾选掉checkbox，文本框置灰，readonly，如果文本框没有输入值，或者为提示消息，恢复默认值

适用环境ie，背景：某项数据插入数据库相对其他数据不频繁，但是需要有默认值的情况。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript"> function onSelected() { var text = document.getElementById("text"); if (document.getElementById("checkbox1").checked == true) { text.readOnly = false; text.value = "input new value please!"; text.style.cssText = "backgroundColor:#fff"; } else { document.getElementById("text").readOnly = true; if (text.value == "" || text.value == "input new value please!") { text.value = document.getElementById("text").defaultValue; } text.style.cssText = "background-color:#cccccc"; } } function afocus(e) { if (e.readOnly == false) { e.value = ""; } } </script> <title></title> </head> <body> Text: <input type="text" name="text" id="text" value="0.0" οnfοcus="afocus(this)" style="background-color:#ccc" readonly/> <input type="checkbox" id="checkbox1" onpropertychange="onSelected()"> </body> </html>