CopyCode The Code is 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 codeThe Code is as follows: <form action = "#">
Price: <input id = "price" type = "text"> <input id = "TJ" hidefocus = true type = "checkbox"> special offer
</Form>
The only thing you can do is add a bit of beautification to make the user experience more floor-level, including the bold border, focus acquisition, and checkbox border line hiding.
Test code<Br/> <p>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]