How to disable / enable input field when clicked using jQuery

Question

How to enable / disable input field on click using jQuery?

I experimented with:

$("#FullName").removeAttr('disabled'); 

which removes disabled="disabled" from this input field:

 <input id="FullName" style="width: 299px" value="Marko" disabled="disabled" /> 

But how to add it again by clicking on another button or how to disable the input field when clicked?

Answer 1

For jQuery version 1.6+ use prop :

 $('#elementId').click(function(){ $('#FullName').prop('disabled', true\false); }); 

For older jQuery versions, use attr :

 $('#elementId').click(function(){ $('#FullName').attr('disabled', 'disabled'\''); }); 

Answer 2

 $("#FullName").prop('disabled', true); 

Will do.

But keep in mind when you disable it (according to the code above) onclick handler will not work as disabled. To enable it, add $("#FullName").removeAttr('disabled'); in the onclick handler of another button or field.

Answer 3

 $('#checkbox-id').click(function() { //If checkbox is checked then disable or enable input if ($(this).is(':checked')) { $("#to-enable-input").removeAttr("disabled"); $("#to-disable-input").attr("disabled","disabled"); } //If checkbox is unchecked then disable or enable input else { $("#to-enable-input").removeAttr("disabled"); $("#to-disable-input").attr("disabled","disabled"); } }); 

Answer 4

another easy way to enable / disable input feild

 $("#anOtherButton").click(function() { $("#FullName").attr('disabled', !$("#FullName").attr('disabled')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <input id="FullName" style="width: 299px" value="Marko" disabled="disabled" /> <br> <br> <input type="button" id="anOtherButton" value="disable/enable" /> 

Answer 5

That should do it.

 $("#FullName").attr('disabled', 'disabled'); 

Shiplu is correct, but use this if you are not using jquery 1.6 +

Answer 6

 $("#anOtherButton").click(function(){ $("#FullName").attr('disabled', 'disabled'); }); 

• . Attr function (attributeName, value)

  Set one or more attributes for a set of matched elements

Answer 7

To switch the field between disabled and enabled, try the following:

 $('#toggle_button').click(function () { $('#FullName').prop("disabled", function (i, val) { return !val; }); })