Copy Code code as follows:
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) {//Editable
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 ';
}
}
}
Copy Code code as follows:
<form action= "#" >
Price: <input id= "Prices" type= "text" > <input id= "TJ" Hidefocus=true type= "checkbox" > Specials
</form>
The only thing to go outside is to add a little landscaping that allows users to experience a more level of building, including the bold border, the focus of the capture, CheckBox border line hidden and so on.
Test code
<textarea id="runcode97794"><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) {//editable 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= "#" > Prices: <input id= "Price" type= "text" > <input id= "TJ" hidefocus=tr UE type= "checkbox" > Specials </form></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
