The prop() operate was added in jQuery 1.6 and its the usual approach to cope with properties however attr() operate does the identical job for jQuery 1.5 and decrease model so you should use attr() for a similar objective in jQuery model decrease than 1.6.
Btw, you can even allow or disable any HTML component e.g. enter textual content area utilizing plain outdated JavaScript.
All you should do is get the component by id and set its disabled property to true or false. You are able to do that when a person clicks on some button by calling a JavaScript operate through the use of the onclick attribute as proven in our first instance.
As a Java internet developer, I can say that JavaScript is jQuery is an important talent. Although the worth of jQuery is gone down a bit of bit resulting from their frameworks like React, Angular, and Vue JS and up to date enhancements on JavaScript itself like ES 6 options, however it’s nonetheless a pressure, and valued within the job market.
How you can allow/disable textual content area utilizing JavaScript
On this instance, now we have an HTML kind, textual content bins, and a few buttons to allow and disable that textual content area. I’m utilizing plain JavaScript, no jQuery but to perform the duty.
The steps are as follows:
1) Register allow() and disable() operate with buttons to allow and disable textual content area
2) Use the getElementById() to seize the textual content area
3) Set the disabled area to true or false
Right here is the pattern HTML file with JavaScript resolution:
<html> <head> <title>How you can allow or disable enter utilizing JavaScript</title> </head> <physique> <h2>Enabling and Disabling textual content area utilizing JavaScript</h2> <kind id="registration-form"> Enter your title: <enter sort="textual content" id="title"> </kind> <button onclick="disable()">Disable the textual content area</button> <button onclick="allow()">Allow the textual content area</button> <script> operate disable() { doc.getElementById("title").disabled = true; } operate allow() { doc.getElementById("title").disabled = false; } </script> </physique> </html>
If you click on the button “Disable the textual content area”, the disable() operate will likely be known as and disabled property of textual content area will likely be set to true, which implies you can not enter textual content on this textual content area anymore, it is disabled.
You’ll be able to re-enable the textual content area by clicking on “Allow the textual content area” button, it’ll name the allow() operate which can reset the disabled property to false.
How you can allow/disable textual content area utilizing jQuery?
Right here is the jQuery code to do the identical factor. On this instance, now we have used prop() operate, if you’re working on jQuery 1.5 or decrease model, simply exchange the prop() with attr() and it ought to work high quality.
Just like the earlier instance, now we have two buttons btn_enable and btn_disable to allow and disable the textual content area.
We connect the occasion handler utilizing click on() operate at $(doc).prepared() which known as after web page is loaded. On occasion handler we seize the textual content area through the use of jQuery ID selector e.g. $(“#title”) after which known as prop(“disabled”, false”) to disable this textual content area.
When a person calls the allow button we simply set the disabled property to true by calling prop(“disabled”, true). This enabled the textual content area once more.
Keep in mind, you can not enter textual content right into a disabled textual content area, once more.
<html> <head> <title>How you can allow or disable textfield utilizing jQuery</title> </head> <physique> <h2>Enabling and Disabling textual content area utilizing jQuery</h2> <kind id="registration-form"> Enter your title: <enter sort="textual content" id="title"> </kind> <button id="btn_disable" >Disable the enter</button> <button id="btn_enable" >Allow the enter</button> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(doc).prepared(operate() { $("#btn_enable").click on(operate(){ $("#title").prop("disabled", false); }); $("#btn_disable").click on(operate(){ $("#title").prop("disabled", true); }); }); </script> </physique> </html>
You’ll be able to check this by working in your browser. Simply bear in mind, to not name removeProp() operate to allow the button once more e.g. removeProp(“disabled”) as a result of it’ll take away the “disabled” attribute from the textual content area and it will not be doable to disable it once more sooner or later, as a substitute simply use prop(“disabled”, false) methodology.
Anyway, right here is the screenshot of the way it will appear like once you open the web page in a browser like Edge or Chrome.
That is all about learn how to allow and disable a component utilizing JavaScript and jQuery. On this instance, now we have disabled the textual content area and re-enabled once more however you should use this method to allow/disable any HTML component. You should use JavaScript or jQuery based mostly upon what’s utilized in your venture.
My suggestion is to be constant. In case you are already utilizing JavaScript then use that, however if you’re utilizing jQuery then it is higher to do it as jQuery approach.
Different jQuery and JavaScript tutorials chances are you’ll prefer to discover
- Prime 5 jQuery Books Each Internet Developer Ought to Learn? (see right here)
- How you can get present URL Parameter utilizing jQuery? (resolution)
- How you can use a number of jQuery Datepicker component in a single HTML web page? (reply)
- 10 Examples of jQuery selectors for Internet Builders (tutorial)
- How you can redirect internet web page utilizing jQuery code? (reply)
- 3 Methods to parse HTML utilizing JSoup in Java? (resolution)
- How you can reload/refresh a web page utilizing jQuery? (reply)
- How you can stop double submission of POST knowledge utilizing JavaScript? (resolution)
- How you can modify a number of components in a single go in jQuery? (instance)
- How you can examine and uncheck checkboxes utilizing jQuery? (tutorial)
