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');

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

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

But how to add it again with click on another button or how to disable input field on click?

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

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