Sometimes nosotros demand to enable as well as disable input elements similar text box, radio buttons, or checkboxes, but every fourth dimension you lot brand a modify you lot demand to reload the HTML? The inquiry is, how tin nosotros create it dynamically without loading the page? Well, nosotros tin work JavaScript, specially jQuery to create this. An chemical constituent tin locomote disabled inwards HTML past times setting disable belongings to truthful as well as enabled in i lawsuit again past times setting disabled=false. By using jQuery, you lot tin catch the chemical constituent you lot desire to enable or disable as well as modify this belongings past times using the prop() or attr() function, depending upon the version of jQuery you lot are using.
The prop() component was added inwards jQuery 1.6 as well as its the touchstone way to bargain amongst properties but attr() function does the same chore for jQuery 1.5 as well as lower version hence you lot tin work attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, you lot tin besides enable or disable whatever HTML chemical constituent e.g. input text plain using evidently former JavaScript.
All you lot demand to create is acquire the chemical constituent past times id as well as laid its disabled belongings to truthful or false. You tin create that when a user clicks on to a greater extent than or less push past times calling a JavaScript component past times using the onclick attribute every bit shown inwards our offset example.
As a Java spider web developer, I tin nation that JavaScript is jQuery is a real of import skill. Even though the value of jQuery is gone downward a footling fighting due to their frameworks similar React, Angular, as well as Vue JS as well as recent enhancements on JavaScript itself similar ES six features, but it is nevertheless a force, as well as valued inwards the chore market.
Though, if you lot are a spider web developer or aspire to driblet dead a spider web developer, I strongly propose you lot to accept a expect at The Web Developer Bootcamp class past times Colt Steele, it's i of the best as well as teaches you lot all of import technologies a spider web developer should know.
The steps are every bit follows:
1) Register enable() as well as disable() component amongst buttons to enable as well as disable text field
2) Use the getElementById() to catch the text field
3) Set the disabled plain to truthful or false
Here is the sample HTML file amongst JavaScript solution:
When you lot click the push "Disable the text field", the disable() component volition locomote called as well as disabled belongings of text plain volition locomote laid to true, which way you lot cannot come inwards text on this text plain anymore, it's disabled.
You tin re-enable the text plain past times clicking on "Enable the text field" button, it volition telephone telephone the enable() component which volition reset the disabled belongings to false.
If you lot desire to larn to a greater extent than almost JavaScript, I propose you lot driblet dead through Colt's The Web Developer Bootcamp and The Advanced Web Developer Bootcamp courses, ii of the best courses for spider web developers.
Similar to the previous example, nosotros receive got ii buttons btn_enable and btn_disable to enable as well as disable the text field.
We attach the number handler using click() component at $(document).ready() which called later on page is loaded. On number handler nosotros catch the text plain past times using jQuery ID selector e.g. $("#name") as well as hence called prop("disabled", false") to disable this text field.
When a user calls the enable push nosotros only laid the disabled belongings to truthful past times calling prop("disabled", true). This enabled the text plain again.
Remember, you lot cannot come inwards text into a disabled text field, in i lawsuit again you lot tin see The Web Developer Bootcamp to larn to a greater extent than almost HTML as well as dissimilar types of input fields.
You tin attempt this past times running inwards your browser. Just remember, non to telephone telephone removeProp() function to enable the push in i lawsuit again e.g. removeProp("disabled") because it volition take the "disabled" attribute from the text plain as well as it won't locomote possible to disable it in i lawsuit again inwards the future, instead only work prop("disabled", false) method.
Btw, if you lot are novel to jQuery I propose you lot to offset driblet dead through here)How to acquire electrical flow URL Parameter using jQuery? (solution) How to work multiple jQuery Date picker chemical constituent inwards i HTML page? (answer) 10 Examples of jQuery selectors for Web Developers (tutorial) How to redirect spider web page using jQuery code? (answer) 3 Ways to parse HTML using JSoup inwards Java? (solution) How to reload/refresh a page using jQuery? (answer) How to preclude double submission of POST information using JavaScript? (solution) How to modify multiple elements inwards i driblet dead inwards jQuery? (example) How to banking concern tally as well as uncheck checkboxes using jQuery? (tutorial) Thanks for reading this article hence far. If you lot similar this article hence delight percentage amongst your friends as well as colleagues. If you lot receive got whatever inquiry or uncertainty hence delight driblet a comment.
P. S. - If you lot don't heed learning from costless resources hence you lot tin besides banking concern tally out my listing of free jQuery courses to start your jQuery journey.
The prop() component was added inwards jQuery 1.6 as well as its the touchstone way to bargain amongst properties but attr() function does the same chore for jQuery 1.5 as well as lower version hence you lot tin work attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, you lot tin besides enable or disable whatever HTML chemical constituent e.g. input text plain using evidently former JavaScript.
All you lot demand to create is acquire the chemical constituent past times id as well as laid its disabled belongings to truthful or false. You tin create that when a user clicks on to a greater extent than or less push past times calling a JavaScript component past times using the onclick attribute every bit shown inwards our offset example.
As a Java spider web developer, I tin nation that JavaScript is jQuery is a real of import skill. Even though the value of jQuery is gone downward a footling fighting due to their frameworks similar React, Angular, as well as Vue JS as well as recent enhancements on JavaScript itself similar ES six features, but it is nevertheless a force, as well as valued inwards the chore market.
Though, if you lot are a spider web developer or aspire to driblet dead a spider web developer, I strongly propose you lot to accept a expect at The Web Developer Bootcamp class past times Colt Steele, it's i of the best as well as teaches you lot all of import technologies a spider web developer should know.
How to enable/disable text plain using JavaScript
In this example, nosotros receive got an HTML form, text boxes, as well as a duet of buttons to enable as well as disable that text field. I am using evidently JavaScript, no jQuery yet to order the task.The steps are every bit follows:
1) Register enable() as well as disable() component amongst buttons to enable as well as disable text field
2) Use the getElementById() to catch the text field
3) Set the disabled plain to truthful or false
Here is the sample HTML file amongst JavaScript solution:
<html> <head> <title>How to enable or disable input using JavaScript</title> </head> <body> <h2>Enabling as well as Disabling text plain using JavaScript</h2> <form id="registration-form"> Enter your name: <input type="text" id="name"> </form> <button onclick="disable()">Disable the text field</button> <button onclick="enable()">Enable the text field</button> <script> function disable() { document.getElementById("name").disabled = true; } function enable() { document.getElementById("name").disabled = false; } </script> </body> </html>
You tin re-enable the text plain past times clicking on "Enable the text field" button, it volition telephone telephone the enable() component which volition reset the disabled belongings to false.
If you lot desire to larn to a greater extent than almost JavaScript, I propose you lot driblet dead through Colt's The Web Developer Bootcamp and The Advanced Web Developer Bootcamp courses, ii of the best courses for spider web developers.
How to enable/disable text plain using jQuery?
Here is the jQuery code to create the same thing. In this example, nosotros receive got used prop() function, if you lot are running on jQuery 1.5 or lower version, only supersede the prop() amongst attr() as well as it should piece of work fine.Similar to the previous example, nosotros receive got ii buttons btn_enable and btn_disable to enable as well as disable the text field.
We attach the number handler using click() component at $(document).ready() which called later on page is loaded. On number handler nosotros catch the text plain past times using jQuery ID selector e.g. $("#name") as well as hence called prop("disabled", false") to disable this text field.
When a user calls the enable push nosotros only laid the disabled belongings to truthful past times calling prop("disabled", true). This enabled the text plain again.
Remember, you lot cannot come inwards text into a disabled text field, in i lawsuit again you lot tin see The Web Developer Bootcamp to larn to a greater extent than almost HTML as well as dissimilar types of input fields.
<html> <head> <title>How to enable or disable textfield using jQuery</title> </head> <body> <h2>Enabling as well as Disabling text plain using jQuery</h2> <form id="registration-form"> Enter your name: <input type="text" id="name"> </form> <button id="btn_disable" >Disable the input</button> <button id="btn_enable" >Enable the input</button> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function() { $("#btn_enable").click(function(){ $("#name").prop("disabled", false); }); $("#btn_disable").click(function(){ $("#name").prop("disabled", true); }); }); </script> </body> </html>
You tin attempt this past times running inwards your browser. Just remember, non to telephone telephone removeProp() function to enable the push in i lawsuit again e.g. removeProp("disabled") because it volition take the "disabled" attribute from the text plain as well as it won't locomote possible to disable it in i lawsuit again inwards the future, instead only work prop("disabled", false) method.
Btw, if you lot are novel to jQuery I propose you lot to offset driblet dead through here)
P. S. - If you lot don't heed learning from costless resources hence you lot tin besides banking concern tally out my listing of free jQuery courses to start your jQuery journey.