Menu
Question
[Question]

Enable and Disable the input text fields using JavaScript or jQuery  

Consider this piece of HTML code:

<body>
  Name: <input type="text" id="name"><br>
  Email: <input type="text" id="email"><br>
  <input id="btnEnableAll" type="button" value="Enable All"/>
  <input id="btnDisableAll" type="button" value="Disable All"/>
  <input id="btnEnableName" type="button" value="Enable Name"/>
  <input id="btnDisableName" type="button" value="Disable Name"/>
</body>

When a user clicks Enable All, enable the input for all the text fields on the form. When she clicks Enable Name, enable the input for the Name field only.

Similarly, when she clicks Disable All, disable the input for all the text fields on the form. When she clicks Disable Name, disable the input for the Name field only.
2 Answers

Use the prop() to change the 'disabled' property of the input text fields.

<script>
  $(document).ready(function(){
    $("#btnEnableAll").click(function() {
      $(":input:text").prop('disabled', false);
    });
    $("#btnDisableAll").click(function() {
      $(":input:text").prop('disabled', true);
    });
    $("#btnEnableName").click(function() {
      $("#name").prop('disabled', false);
    });
    $("#btnDisableName").click(function() {
      $("#name").prop('disabled', true);
    });
  });  
</script>

If you are looking for plain JavaScript solution, here it is ...

$("#btnEnableAll").click(function() {
  $("input")[0].disabled = false;
  $("input")[0].disabled = false;
});
$("#btnDisableAll").click(function() {
  $("input")[0].disabled = true;
  $("input")[1].disabled = true;
});
$("#btnEnableName").click(function() {
  $("input")[0].disabled = false;
});
$("#btnDisableName").click(function() {
  $("input")[0].disabled = true;
});

asked Oct 03, 2016
viewed 634 times
active Oct 03, 2016
Looking for a job?
Startup (stealth)
London, UK

Microsoft
Seattle

JP/Morgan Chase
Dallas, Texas

Accenture
New York


Related
• Refresh a page with JavaScript
• How do I refresh a page with JavaScript or jQuery?
• Refresh a page with JavaScript
• How to get the name of an element with jQuery
• How to get the name of an element with jQuery
• What is better: place the using directives inside a namespace or outside?
• Difference between jQuery and Angular
• Difference between jQuery and Angular
• Difference between jQuery and Angular
• Difference between jQuery and Angular