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 ' ;
}
}
}
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 >
价格： < 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，如需转载请自行联系原作者
