勾选时激活input，否则禁用

 

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

转载于:https://www.cnblogs.com/jikey/archive/2009/12/10/1621342.html