How To Enable/Disable An Chemical Cistron 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 y'all brand a alter y'all demand to reload the HTML? The enquiry is, how tin sack nosotros produce it dynamically without loading the page? Well, nosotros tin sack exercise JavaScript, especially jQuery to produce this. An chemical gene tin sack hold out disabled inwards HTML yesteryear setting disable belongings to truthful too enabled over again yesteryear setting disabled=false. By using jQuery, y'all tin sack catch the chemical gene y'all desire to enable or disable too alter this belongings yesteryear using the prop() or attr() function, depending upon the version of jQuery y'all are using.
The prop() business office was added inwards jQuery 1.6 too its the measure way to bargain alongside properties but attr() function does the same project for jQuery 1.5 too lower version thence y'all tin sack exercise attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, y'all tin sack equally good enable or disable whatever HTML chemical gene e.g. input text champaign using manifestly erstwhile JavaScript.
All y'all demand to produce is acquire the chemical gene yesteryear id too laid its disabled belongings to truthful or false. You tin sack produce that when a user clicks on around push yesteryear calling a JavaScript business office yesteryear using the onclick attribute equally shown inwards our kickoff example.
As a Java spider web developer, I tin sack country that JavaScript is jQuery is a really of import skill. Even though the value of jQuery is gone downwards a picayune chip due to their frameworks similar React, Angular, too Vue JS too recent enhancements on JavaScript itself similar ES six features, but it is even thence a force, too valued inwards the project market.
Though, if y'all are a spider web developer or aspire to acquire a spider web developer, I strongly propose y'all to accept a await at The Web Developer Bootcamp course of report yesteryear Colt Steele, it's i of the best too teaches y'all all of import technologies a spider web developer should know.
The steps are equally follows:
1) Register enable() too disable() business office alongside buttons to enable too disable text field
2) Use the getElementById() to catch the text field
3) Set the disabled champaign to truthful or false
Here is the sample HTML file alongside JavaScript solution:
When y'all click the push "Disable the text field", the disable() business office volition hold out called too disabled belongings of text champaign volition hold out laid to true, which agency y'all cannot acquire into text on this text champaign anymore, it's disabled.
You tin sack re-enable the text champaign yesteryear clicking on "Enable the text field" button, it volition telephone scream upward the enable() business office which volition reset the disabled belongings to false.
If y'all desire to acquire to a greater extent than close JavaScript, I propose y'all boot the bucket 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 guide maintain 2 buttons btn_enable and btn_disable to enable too disable the text field.
We attach the number handler using click() business office at $(document).ready() which called afterwards page is loaded. On number handler nosotros catch the text champaign yesteryear using jQuery ID selector e.g. $("#name") too thence called prop("disabled", false") to disable this text field.
When a user calls the enable push nosotros merely laid the disabled belongings to truthful yesteryear calling prop("disabled", true). This enabled the text champaign again.
Remember, y'all cannot acquire into text into a disabled text field, over again y'all tin sack see The Web Developer Bootcamp to acquire to a greater extent than close HTML too unlike types of input fields.
You tin sack examine this yesteryear running inwards your browser. Just remember, non to telephone scream upward removeProp() function to enable the push over again e.g. removeProp("disabled") because it volition take away the "disabled" attribute from the text champaign too it won't hold out possible to disable it over again inwards the future, instead merely exercise prop("disabled", false) method.
Btw, if y'all are novel to jQuery I propose y'all to kickoff boot the bucket through here)How to acquire electrical flow URL Parameter using jQuery? (solution) How to exercise multiple jQuery Date picker chemical gene 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 forestall double submission of POST information using JavaScript? (solution) How to modify multiple elements inwards i boot the bucket inwards jQuery? (example) How to cheque too uncheck checkboxes using jQuery? (tutorial) Thanks for reading this article thence far. If y'all similar this article thence delight portion alongside your friends too colleagues. If y'all guide maintain whatever enquiry or doubtfulness thence delight drib a comment.
P. S. - If y'all don't hear learning from gratuitous resources thence y'all tin sack equally good cheque out my listing of free jQuery courses to start your jQuery journey.
The prop() business office was added inwards jQuery 1.6 too its the measure way to bargain alongside properties but attr() function does the same project for jQuery 1.5 too lower version thence y'all tin sack exercise attr() for the same purpose inwards jQuery version lower than 1.6.
Btw, y'all tin sack equally good enable or disable whatever HTML chemical gene e.g. input text champaign using manifestly erstwhile JavaScript.
All y'all demand to produce is acquire the chemical gene yesteryear id too laid its disabled belongings to truthful or false. You tin sack produce that when a user clicks on around push yesteryear calling a JavaScript business office yesteryear using the onclick attribute equally shown inwards our kickoff example.
As a Java spider web developer, I tin sack country that JavaScript is jQuery is a really of import skill. Even though the value of jQuery is gone downwards a picayune chip due to their frameworks similar React, Angular, too Vue JS too recent enhancements on JavaScript itself similar ES six features, but it is even thence a force, too valued inwards the project market.
Though, if y'all are a spider web developer or aspire to acquire a spider web developer, I strongly propose y'all to accept a await at The Web Developer Bootcamp course of report yesteryear Colt Steele, it's i of the best too teaches y'all all of import technologies a spider web developer should know.
How to enable/disable text champaign using JavaScript
In this example, nosotros guide maintain an HTML form, text boxes, too a duo of buttons to enable too disable that text field. I am using manifestly JavaScript, no jQuery yet to hit the task.The steps are equally follows:
1) Register enable() too disable() business office alongside buttons to enable too disable text field
2) Use the getElementById() to catch the text field
3) Set the disabled champaign 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 too Disabling text champaign 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 sack re-enable the text champaign yesteryear clicking on "Enable the text field" button, it volition telephone scream upward the enable() business office which volition reset the disabled belongings to false.
If y'all desire to acquire to a greater extent than close JavaScript, I propose y'all boot the bucket 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 champaign using jQuery?
Here is the jQuery code to produce the same thing. In this example, nosotros guide maintain used prop() function, if y'all are running on jQuery 1.5 or lower version, merely supervene upon the prop() alongside attr() too it should piece of occupation fine.Similar to the previous example, nosotros guide maintain 2 buttons btn_enable and btn_disable to enable too disable the text field.
We attach the number handler using click() business office at $(document).ready() which called afterwards page is loaded. On number handler nosotros catch the text champaign yesteryear using jQuery ID selector e.g. $("#name") too thence called prop("disabled", false") to disable this text field.
When a user calls the enable push nosotros merely laid the disabled belongings to truthful yesteryear calling prop("disabled", true). This enabled the text champaign again.
Remember, y'all cannot acquire into text into a disabled text field, over again y'all tin sack see The Web Developer Bootcamp to acquire to a greater extent than close HTML too unlike types of input fields.
<html> <head> <title>How to enable or disable textfield using jQuery</title> </head> <body> <h2>Enabling too Disabling text champaign 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 sack examine this yesteryear running inwards your browser. Just remember, non to telephone scream upward removeProp() function to enable the push over again e.g. removeProp("disabled") because it volition take away the "disabled" attribute from the text champaign too it won't hold out possible to disable it over again inwards the future, instead merely exercise prop("disabled", false) method.
Btw, if y'all are novel to jQuery I propose y'all to kickoff boot the bucket through here)
P. S. - If y'all don't hear learning from gratuitous resources thence y'all tin sack equally good cheque out my listing of free jQuery courses to start your jQuery journey.
Belum ada Komentar untuk "How To Enable/Disable An Chemical Cistron Using Jquery In Addition To Javascript? Example"
Posting Komentar