How To Enable/Disable An Chemical Gene Using Jquery In Addition To Javascript? Example
Sometimes nosotros demand to enable too 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 query is, how tin nosotros create it dynamically without loading the page? Well, nosotros tin utilization JavaScript, especially jQuery to create this. An chemical ingredient tin live on disabled inwards HTML yesteryear setting disable holding to truthful too enabled i time again yesteryear setting disabled=false. By using jQuery, you lot tin catch the chemical ingredient you lot desire to enable or disable too alter this holding yesteryear using the prop() or attr() function, depending upon the version of jQuery you lot are using.
The prop() portion was added inwards jQuery 1.6 too its the touchstone way to bargain amongst properties but attr() function does the same labor for jQuery 1.5 too lower version thus you lot tin utilization attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, you lot tin likewise enable or disable whatever HTML chemical ingredient e.g. input text plain using obviously quondam JavaScript.
All you lot demand to create is acquire the chemical ingredient yesteryear id too laid its disabled holding to truthful or false. You tin create that when a user clicks on or thus push yesteryear calling a JavaScript portion yesteryear using the onclick attribute every bit shown inwards our starting fourth dimension 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 downwards a picayune flake due to their frameworks similar React, Angular, too Vue JS too recent enhancements on JavaScript itself similar ES half-dozen features, but it is even thus a force, too valued inwards the labor market.
Though, if you lot are a spider web developer or aspire to acquire a spider web developer, I strongly propose you lot to accept a hold off at The Web Developer Bootcamp course of pedagogy yesteryear Colt Steele, it's i of the best too teaches you lot all of import technologies a spider web developer should know.
The steps are every bit follows:
1) Register enable() too disable() portion amongst buttons to enable too 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() portion volition live on called too disabled holding of text plain volition live on laid to true, which agency you lot cannot acquire inwards text on this text plain anymore, it's disabled.
You tin re-enable the text plain yesteryear clicking on "Enable the text field" button, it volition telephone phone the enable() portion which volition reset the disabled holding to false.
If you lot desire to larn to a greater extent than almost JavaScript, I propose you lot travel through Colt's The Web Developer Bootcamp and The Advanced Web Developer Bootcamp courses, 2 of the best courses for spider web developers.
Similar to the previous example, nosotros direct maintain 2 buttons btn_enable and btn_disable to enable too disable the text field.
We attach the upshot handler using click() portion at $(document).ready() which called afterwards page is loaded. On upshot handler nosotros catch the text plain yesteryear using jQuery ID selector e.g. $("#name") too and thus called prop("disabled", false") to disable this text field.
When a user calls the enable push nosotros merely laid the disabled holding to truthful yesteryear calling prop("disabled", true). This enabled the text plain again.
Remember, you lot cannot acquire inwards text into a disabled text field, i time again you lot tin see The Web Developer Bootcamp to larn to a greater extent than almost HTML too dissimilar types of input fields.
You tin bear witness this yesteryear running inwards your browser. Just remember, non to telephone phone removeProp() function to enable the push i time again e.g. removeProp("disabled") because it volition withdraw the "disabled" attribute from the text plain too it won't live on possible to disable it i time again inwards the future, instead merely utilization prop("disabled", false) method.
Btw, if you lot are novel to jQuery I propose you lot to starting fourth dimension travel through here)How to acquire electrical flow URL Parameter using jQuery? (solution) How to utilization multiple jQuery Date picker chemical ingredient 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 travel inwards jQuery? (example) How to depository fiscal establishment jibe too uncheck checkboxes using jQuery? (tutorial) Thanks for reading this article thus far. If you lot similar this article too thus delight percentage amongst your friends too colleagues. If you lot direct maintain whatever query or dubiety too thus delight drib a comment.
P. S. - If you lot don't hear learning from costless resources too thus you lot tin likewise depository fiscal establishment jibe out my listing of free jQuery courses to start your jQuery journey.
The prop() portion was added inwards jQuery 1.6 too its the touchstone way to bargain amongst properties but attr() function does the same labor for jQuery 1.5 too lower version thus you lot tin utilization attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, you lot tin likewise enable or disable whatever HTML chemical ingredient e.g. input text plain using obviously quondam JavaScript.
All you lot demand to create is acquire the chemical ingredient yesteryear id too laid its disabled holding to truthful or false. You tin create that when a user clicks on or thus push yesteryear calling a JavaScript portion yesteryear using the onclick attribute every bit shown inwards our starting fourth dimension 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 downwards a picayune flake due to their frameworks similar React, Angular, too Vue JS too recent enhancements on JavaScript itself similar ES half-dozen features, but it is even thus a force, too valued inwards the labor market.
Though, if you lot are a spider web developer or aspire to acquire a spider web developer, I strongly propose you lot to accept a hold off at The Web Developer Bootcamp course of pedagogy yesteryear Colt Steele, it's i of the best too 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 direct maintain an HTML form, text boxes, too a duad of buttons to enable too disable that text field. I am using obviously JavaScript, no jQuery yet to seat the task.The steps are every bit follows:
1) Register enable() too disable() portion amongst buttons to enable too 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 too 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 yesteryear clicking on "Enable the text field" button, it volition telephone phone the enable() portion which volition reset the disabled holding to false.
If you lot desire to larn to a greater extent than almost JavaScript, I propose you lot travel through Colt's The Web Developer Bootcamp and The Advanced Web Developer Bootcamp courses, 2 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 direct maintain used prop() function, if you lot are running on jQuery 1.5 or lower version, merely supersede the prop() amongst attr() too it should piece of job fine.Similar to the previous example, nosotros direct maintain 2 buttons btn_enable and btn_disable to enable too disable the text field.
We attach the upshot handler using click() portion at $(document).ready() which called afterwards page is loaded. On upshot handler nosotros catch the text plain yesteryear using jQuery ID selector e.g. $("#name") too and thus called prop("disabled", false") to disable this text field.
When a user calls the enable push nosotros merely laid the disabled holding to truthful yesteryear calling prop("disabled", true). This enabled the text plain again.
Remember, you lot cannot acquire inwards text into a disabled text field, i time again you lot tin see The Web Developer Bootcamp to larn to a greater extent than almost HTML too dissimilar types of input fields.
<html> <head> <title>How to enable or disable textfield using jQuery</title> </head> <body> <h2>Enabling too 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 bear witness this yesteryear running inwards your browser. Just remember, non to telephone phone removeProp() function to enable the push i time again e.g. removeProp("disabled") because it volition withdraw the "disabled" attribute from the text plain too it won't live on possible to disable it i time again inwards the future, instead merely utilization prop("disabled", false) method.
Btw, if you lot are novel to jQuery I propose you lot to starting fourth dimension travel through here)
P. S. - If you lot don't hear learning from costless resources too thus you lot tin likewise depository fiscal establishment jibe out my listing of free jQuery courses to start your jQuery journey.
Komentar
Posting Komentar