How To Enable/Disable An Chemical Component Division 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 modify you lot demand to reload the HTML? The inquiry is, how tin flame nosotros produce it dynamically without loading the page? Well, nosotros tin flame utilisation JavaScript, especially jQuery to produce this. An chemical ingredient tin flame locomote disabled inward HTML past times setting disable belongings to truthful too enabled i time to a greater extent than past times setting disabled=false. By using jQuery, you lot tin flame catch the chemical ingredient you lot desire to enable or disable too modify this belongings past times using the prop() or attr() function, depending upon the version of jQuery you lot are using.

The prop() business office was added inward jQuery 1.6 too its the criterion way to bargain amongst properties but attr() function does the same undertaking for jQuery 1.5 too lower version therefore you lot tin flame utilisation attr() for the same purpose inward jQuery version lower than 1.6.

Btw, you lot tin flame likewise enable or disable whatever HTML chemical ingredient e.g. input text patch using plainly one-time JavaScript.

All you lot demand to produce is acquire the chemical ingredient past times id too laid its disabled belongings to truthful or false. You tin flame produce that when a user clicks on or therefore push past times calling a JavaScript business office past times using the onclick attribute equally shown inward our get-go example.

As a Java spider web developer, I tin flame tell that JavaScript is jQuery is a real of import skill. Even though the value of jQuery is gone downward a niggling fighting due to their frameworks similar React, Angular, too Vue JS too recent enhancements on JavaScript itself similar ES half dozen features, but it is nevertheless a force, too valued inward the undertaking market.

Though, if you lot are a spider web developer or aspire to locomote a spider web developer, I strongly advise you lot to accept a await at The Web Developer Bootcamp course of written report past times 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 patch using JavaScript

In this example, nosotros conduct keep an HTML form, text boxes, too a brace of buttons to enable too disable that text field. I am using plainly JavaScript, no jQuery yet to order the task.

The steps are equally follows:

1) Register enable() too disable() business office amongst buttons to enable too disable text field
2) Use the getElementById() to catch the text field
3) Set the disabled patch 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 patch 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> 

When you lot click the push "Disable the text field", the disable() business office volition locomote called too disabled belongings of text patch volition locomote laid to true, which agency you lot cannot locomote into text on this text patch anymore, it's disabled.

You tin flame re-enable the text patch past times clicking on "Enable the text field" button, it volition telephone outcry upwards the enable() business office which volition reset the disabled belongings to false.

If you lot desire to larn to a greater extent than almost JavaScript, I advise you lot locomote through Colt's The Web Developer Bootcamp and The Advanced Web Developer Bootcamp courses, 2 of the best courses for spider web developers.

 Sometimes nosotros demand to enable too disable input elements similar text box How to enable/disable an chemical ingredient using jQuery too JavaScript? Example




How to enable/disable text patch using jQuery?

Here is the jQuery code to produce the same thing. In this example, nosotros conduct keep used prop() function, if you lot are running on jQuery 1.5 or lower version, only supervene upon the prop() amongst attr() too it should piece of occupation fine.

Similar to the previous example, nosotros conduct keep 2 buttons btn_enable and btn_disable to enable too disable the text field.

We attach the effect handler using click() business office at $(document).ready() which called afterward page is loaded. On effect handler nosotros catch the text patch past times using jQuery ID selector e.g. $("#name") too and therefore 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 patch again.

Remember, you lot cannot locomote into text into a disabled text field, i time to a greater extent than you lot tin flame 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 patch 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 seek this past times running inward your browser. Just remember, non to telephone outcry upwards removeProp() function to enable the push i time to a greater extent than e.g. removeProp("disabled") because it volition withdraw the "disabled" attribute from the text patch too it won't locomote possible to disable it i time to a greater extent than inward the future, instead only utilisation prop("disabled", false) method.

Btw, if you lot are novel to jQuery I advise you lot to get-go locomote through here)
  • How to acquire electrical current URL Parameter using jQuery? (solution)
  • How to utilisation multiple jQuery Date picker chemical ingredient inward 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 inward 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 inward i locomote inward jQuery? (example)
  • How to depository fiscal establishment fit too uncheck checkboxes using jQuery? (tutorial)
  • Thanks for reading this article therefore far. If you lot similar this article too therefore delight percentage amongst your friends too colleagues. If you lot conduct keep whatever inquiry or dubiety too therefore delight drib a comment.

    P. S. - If you lot don't hear learning from gratis resources too therefore you lot tin flame likewise depository fiscal establishment fit out my listing of free jQuery courses to start your jQuery journey.

    0 Response to "How To Enable/Disable An Chemical Component Division Using Jquery In Addition To Javascript? Example"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel