勾选时激活input 否则禁用的javascript代码
作者:bea
代码如下: window.onload = function(){ var price = document.getElementById('price'); price.disabled = true; price.style.padding = '2px 3px'; price.style.background = '#eee'; price.style.border = '1px solid #ccc'; var tj = document.getEl
代码如下:
window.onload = function(){
var price = document.getElementById('price');
price.disabled = true;
price.style.padding = '2px 3px';
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
var tj = document.getElementById('tj');
tj.onclick = function(){
if(tj.checked == true){ //可编辑
price.disabled = false;
price.style.background = '#fff';
price.style.border = '2px solid #ff7d00';
price.style.padding = '2px 3px';
price.focus();
} else {
price.disabled = true;
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
price.style.padding = '2px 3px';
}
}
}
代码如下:
<form action="#">
价格:<input id="price" type="text"> <input id="tj" hidefocus=true type="checkbox">特价
</form>
唯一的可去之外是加了一点美化,使用户体验更加一层楼,其中包括边框的加粗,焦点的获取,checkbox边框线的隐藏等等。
测试代码
<script type="text/javascript">
window.onload = function(){
var price = document.getElementById('price');
price.disabled = true;
price.style.padding = '2px 3px';
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
var tj = document.getElementById('tj');
tj.onclick = function(){
if(tj.checked == true){ //可编辑
price.disabled = false;
price.style.background = '#fff';
price.style.border = '2px solid #ff7d00';
price.style.padding = '2px 3px';
price.focus();
} else {
price.disabled = true;
price.style.background = '#eee';
price.style.border = '1px solid #ccc';
price.style.padding = '2px 3px';
}
}
}
</script>
<form action="#">
价格:<input id="price" type="text"> <input id="tj" hidefocus=true type="checkbox">特价
</form>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js 页面传参数时 参数值含特殊字符的问题
- input 日期选择功能的javascript代码
- JQuery下关于$.Ready()的分析
- javascript下搜索子字符串的的实现代码()
- javascript与asp.net(c#)互相调用方法
- JavaScript 字符串与数组转换函数[不用split与join]
- 魔方在线秒表javascript版
- jQuery 行背景颜色的交替显示(隔行变色)实现代码
- 页面中iframe相互传值传参
- jquery提示 "object expected"的解决方法
- js 加载并解析XML字符串的代码
- javascript 强制刷新页面的实现代码
- ExtJS下grid的一些属性说明
- 用于CSS代码压缩与格式化的javascript函数代码
- javascript 数组使用方法汇总
- jQuery Selectors(选择器)的使用(九、表单对象属性篇)
- 用jquery ajax获取网站Alexa排名的代码
- jValidate 基于jQuery的表单验证插件
- javascript 输入文本框时的友好提示