How to disable/enable input field on click with jQuery

Question

How to properly enable/disable input field on click with jQuery?

I was experimenting with:

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

Answer 1

For jQuery version 1.6+ use prop:

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

For older versions of jQuery use attr:

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

Answer 2

This should do it.

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

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

Answer 3

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

• .attr( attributeName, value) function

  Set one or more attributes for the set of matched elements

Answer 4

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

Will do.

But keep in mind after you disable it (by the above code) onclick handler wont work as its disabled. To enable it again add $("#FullName").removeAttr('disabled'); in the onclick handler of another button or field.

Answer 5

another simple method 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 6

$('#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");
    }
});