当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 勾选时激活input 否则禁用的javascript代码

Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
使用JQUERY Tabs插件宿主IFRAMES
jquery 简短右键菜单 多浏览器兼容
JQery 渐变图片导航效果代码 漂亮
HTML node相关的一些资料整理
JavaScript与DropDownList 区别分析
20个非常棒的Jquery实用工具 国外文章
Firefox+FireBug使JQuery的学习更加轻松愉快
firefox firebug中文入门教程 脚本之家新年特别版
firefox插件Firebug的使用教程
javascript addLoadEvent函数说明
javascript getElementsByClassName 和js取地址栏参数
让firefox支持IE的一些方法的javascript扩展函数代码
javascript 多种搜索引擎集成的页面实现代码
Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox
javascript 模拟点击广告
javascript 精确获取样式属性(上)
javascript 精确获取样式属性(下)
javascript 精确获取页面元素的位置
javascript 可控式透明特效实现代码

Javascript 中的 勾选时激活input 否则禁用的javascript代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 90 ::
收藏到网摘: n/a

唯一的可去之外是加了一点美化,使用户体验更加一层楼,其中包括边框的加粗,焦点的获取,checkbox边框线的隐藏等等。
复制代码 代码如下:

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边框线的隐藏等等。
测试代码

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]