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边框线的隐藏等等。
本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2009/12/10/1621342.html，如需转载请自行联系原作者
