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?

http://stackoverflow.com/questions/1414365/how-to-disable-an-input-with-jquery check here — jeremysawesome, Mar 10 '12 at 20:25

score 27 · Accepted Answer · answered Mar 10 '12 at 20:27

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

score 5 · Answer 2 · answered Jul 04 '13 at 20:05

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

score 5 · Answer 3 · answered Mar 10 '12 at 20:26

5

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

answered Mar 10 '12 at 20:26

Shiplu Mokaddim

56,364
17
141
187

Thank you for making the second part clear. I could not figure out why the click event was not firing when the text input was disabled. – decapo Feb 14 '17 at 14:05

Rejeesh Prarath · Answer 4 · 2015-12-07T14:16:51.823

2

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" />

edited Dec 07 '15 at 14:16

answered May 30 '14 at 06:43

Rejeesh Prarath

497
5
8

score 1 · Answer 5 · answered Mar 10 '12 at 20:26

1

This should do it.

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

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

answered Mar 10 '12 at 20:26

Brian S

1,051
9
10

sll · Answer 6 · 2012-03-11T07:51:33.307

1

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

.attr( attributeName, value) function

Set one or more attributes for the set of matched elements

edited Mar 11 '12 at 07:51

answered Mar 10 '12 at 20:27

sll

61,540
22
104
156

You forgot the `#` in the first selector `$("anOherButton")...` and it has typo. – gdoron Mar 10 '12 at 20:32

score 0 · Answer 7 · answered Jun 24 '15 at 04:35

0

To toggle a field between disabled and enabled, try this:

$('#toggle_button').click(function () {
    $('#FullName').prop("disabled",

    function (i, val) {
        return !val;
    });
})

answered Jun 24 '15 at 04:35

David Hempy

5,373
2
40
68

How to disable/enable input field on click with jQuery

7 Answers7

Linked