How To Disable/enable Input Field On Click With Jquery

How to properly enable/disable input field on click with jQuery? I was experimenting with: $('#FullName').removeAttr('disabled'); which removes disabled='disabled' from this input

Solution 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'\'');
});

Solution 2:

$("#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.

Solution 3:

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

Solution 4:

another simple method to enable/disable input feild

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

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

Solution 5:

This should do it.

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

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