How To Enable/Disable An Chemical Cistron Using Jquery In Addition To Javascript? Example
Saturday, January 27, 2018
Add Comment
Sometimes nosotros demand to enable together with disable input elements similar text box, radio buttons, or checkboxes, but every fourth dimension you lot brand a alter you lot demand to reload the HTML? The enquiry is, how tin flame nosotros create it dynamically without loading the page? Well, nosotros tin flame exercise JavaScript, peculiarly jQuery to create this. An chemical ingredient tin flame live on disabled inwards HTML yesteryear setting disable belongings to truthful together with enabled ane time again yesteryear setting disabled=false. By using jQuery, you lot tin flame pick out conduct maintain of the chemical ingredient you lot desire to enable or disable together with alter this belongings yesteryear 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 together with its the measure way to bargain alongside properties but attr() function does the same chore for jQuery 1.5 together with lower version hence you lot tin flame exercise attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, you lot tin flame likewise enable or disable whatsoever HTML chemical ingredient e.g. input text plain using evidently onetime JavaScript.
All you lot demand to create is acquire the chemical ingredient yesteryear id together with laid its disabled belongings to truthful or false. You tin flame create that when a user clicks on around push clitoris yesteryear calling a JavaScript component yesteryear using the onclick attribute every bit shown inwards our showtime example.
As a Java spider web developer, I tin flame tell that JavaScript is jQuery is a really of import skill. Even though the value of jQuery is gone downward a piffling chip due to their frameworks similar React, Angular, together with Vue JS together with recent enhancements on JavaScript itself similar ES six features, but it is all the same a force, together with valued inwards the chore market.
Though, if you lot are a spider web developer or aspire to move a spider web developer, I strongly propose you lot to receive got a await at The Web Developer Bootcamp course of didactics yesteryear Colt Steele, it's ane of the best together with teaches you lot all of import technologies a spider web developer should know.
The steps are every bit follows:
1) Register enable() together with disable() component alongside buttons to enable together with disable text field
2) Use the getElementById() to pick out conduct maintain of the text field
3) Set the disabled plain to truthful or false
Here is the sample HTML file alongside JavaScript solution:
When you lot click the push clitoris "Disable the text field", the disable() component volition live on called together with disabled belongings of text plain volition live on laid to true, which agency you lot cannot come inwards text on this text plain anymore, it's disabled.
You tin flame re-enable the text plain yesteryear 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 acquire to a greater extent than virtually JavaScript, I propose you lot move 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 together with disable the text field.
We attach the number handler using click() component at $(document).ready() which called later page is loaded. On number handler nosotros pick out conduct maintain of the text plain yesteryear using jQuery ID selector e.g. $("#name") together with hence called prop("disabled", false") to disable this text field.
When a user calls the enable push clitoris nosotros simply laid the disabled belongings to truthful yesteryear calling prop("disabled", true). This enabled the text plain again.
Remember, you lot cannot come inwards text into a disabled text field, ane time again you lot tin flame see The Web Developer Bootcamp to acquire to a greater extent than virtually HTML together with dissimilar types of input fields.
You tin flame attempt this yesteryear running inwards your browser. Just remember, non to telephone telephone removeProp() function to enable the push clitoris ane time again e.g. removeProp("disabled") because it volition withdraw the "disabled" attribute from the text plain together with it won't live on possible to disable it ane time again inwards the future, instead simply exercise prop("disabled", false) method.
Btw, if you lot are novel to jQuery I propose you lot to showtime move through here)How to acquire electrical current URL Parameter using jQuery? (solution) How to exercise multiple jQuery Date picker chemical ingredient inwards ane 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 ane move inwards jQuery? (example) How to banking concern agree together with uncheck checkboxes using jQuery? (tutorial) Thanks for reading this article hence far. If you lot similar this article hence delight portion alongside your friends together with colleagues. If you lot receive got whatsoever enquiry or dubiousness hence delight drib a comment.
P. S. - If you lot don't hear learning from complimentary resources hence you lot tin flame likewise banking concern agree out my listing of free jQuery courses to start your jQuery journey.
Sumber https://javarevisited.blogspot.com/
The prop() component was added inwards jQuery 1.6 together with its the measure way to bargain alongside properties but attr() function does the same chore for jQuery 1.5 together with lower version hence you lot tin flame exercise attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, you lot tin flame likewise enable or disable whatsoever HTML chemical ingredient e.g. input text plain using evidently onetime JavaScript.
All you lot demand to create is acquire the chemical ingredient yesteryear id together with laid its disabled belongings to truthful or false. You tin flame create that when a user clicks on around push clitoris yesteryear calling a JavaScript component yesteryear using the onclick attribute every bit shown inwards our showtime example.
As a Java spider web developer, I tin flame tell that JavaScript is jQuery is a really of import skill. Even though the value of jQuery is gone downward a piffling chip due to their frameworks similar React, Angular, together with Vue JS together with recent enhancements on JavaScript itself similar ES six features, but it is all the same a force, together with valued inwards the chore market.
Though, if you lot are a spider web developer or aspire to move a spider web developer, I strongly propose you lot to receive got a await at The Web Developer Bootcamp course of didactics yesteryear Colt Steele, it's ane of the best together with 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, together with a brace of buttons to enable together with disable that text field. I am using evidently JavaScript, no jQuery yet to achieve the task.The steps are every bit follows:
1) Register enable() together with disable() component alongside buttons to enable together with disable text field
2) Use the getElementById() to pick out conduct maintain of the text field
3) Set the disabled plain to truthful or false
Here is the sample HTML file alongside JavaScript solution:
<html> <head> <title>How to enable or disable input using JavaScript</title> </head> <body> <h2>Enabling together with 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 flame re-enable the text plain yesteryear 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 acquire to a greater extent than virtually JavaScript, I propose you lot move 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, simply supersede the prop() alongside attr() together with it should piece of job fine.Similar to the previous example, nosotros receive got ii buttons btn_enable and btn_disable to enable together with disable the text field.
We attach the number handler using click() component at $(document).ready() which called later page is loaded. On number handler nosotros pick out conduct maintain of the text plain yesteryear using jQuery ID selector e.g. $("#name") together with hence called prop("disabled", false") to disable this text field.
When a user calls the enable push clitoris nosotros simply laid the disabled belongings to truthful yesteryear calling prop("disabled", true). This enabled the text plain again.
Remember, you lot cannot come inwards text into a disabled text field, ane time again you lot tin flame see The Web Developer Bootcamp to acquire to a greater extent than virtually HTML together with dissimilar types of input fields.
<html> <head> <title>How to enable or disable textfield using jQuery</title> </head> <body> <h2>Enabling together with 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 flame attempt this yesteryear running inwards your browser. Just remember, non to telephone telephone removeProp() function to enable the push clitoris ane time again e.g. removeProp("disabled") because it volition withdraw the "disabled" attribute from the text plain together with it won't live on possible to disable it ane time again inwards the future, instead simply exercise prop("disabled", false) method.
Btw, if you lot are novel to jQuery I propose you lot to showtime move through here)
P. S. - If you lot don't hear learning from complimentary resources hence you lot tin flame likewise banking concern agree out my listing of free jQuery courses to start your jQuery journey.
0 Response to "How To Enable/Disable An Chemical Cistron Using Jquery In Addition To Javascript? Example"
Post a Comment