jQuery `prop` method not functioning as expected

Question

I am getting issue with jQuery prop method. If I am setting value dynamically, and then disabling the input then the value is hiding. Below is my code:

$("#firstName").val("First Name");
$("input").prop("disabled",true);

and now clicking edit button and removing disabled.

$("input").prop("disabled",false);

at this point of time, my value is again visible. Can anybody help me in understanding this and make that value visible even on disable mode? Thanks

`disabled` doesn't make it invisible it prevent users entering values/submitted in the form — Liam, Nov 22 '16 at 09:56
i understand that. but i m unable to see the values which i added after disabling to true — Walberg, Nov 22 '16 at 09:58
Your question isn't clear. What do you mean *unable to see*? Please create a [mcve](http://stackoverflow.com/help/mcve) — Liam, Nov 22 '16 at 09:58
Please provide [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve), it's impossible to answer with this information. — Esko, Nov 22 '16 at 09:59
This does not hide the text in Chrome on windows: `$("#firstName").on("click", function() { $("#firstName").val("First Name"); $("input").prop("disabled", true); })` - it only greys the field out but the text is still visible. Please click the `<>` button and create a snippet that shows the issue — mplungjan, Nov 22 '16 at 09:59
Please see the pen . [link text](http://codepen.io/walberg/pen/JbWVxK) — Walberg, Nov 22 '16 at 10:21

score 0 · Answer 1 · edited Dec 13 '17 at 15:25

0

Here is the working JSFiddle which I made for you. The problem is with your jQuery script loading.

<input type="text" value="firstName" disabled="true" />
<button id="chProp">
    Change Prop
</button>

$("#chProp").on('click', function(){
   $("input").prop("disabled",false);
});

Hope it will solve your issue.

edited Dec 13 '17 at 15:25

marc_s

675,133
158
1,253
1,388

answered Nov 22 '16 at 10:03

Karthik Sivakumar

98
12

Please see this pen . [link text](http://codepen.io/walberg/pen/JbWVxK). – Walberg Nov 22 '16 at 10:22
Why you have added HTML elements inside CSS column? – Karthik Sivakumar Nov 22 '16 at 10:28
no its not. if you load the page, then its getting disabled, and the value is being hidden. once you click on button then its displaying. i understand its design issue, but i need to know why its happening like this – Walberg Nov 22 '16 at 10:28
See the fiddle which I have shared with you in my answer! If it is working fine & not working in your design means there might be a problem with your page load or design CSS – Karthik Sivakumar Nov 22 '16 at 10:31
Your value is visible in your Pen!. Since the color is white the value is not visible dear. Check manually by selecting the value with mouse. – Karthik Sivakumar Nov 22 '16 at 10:38
In your CSS .form-group input, .form-group textarea {} there is a property color: transparent. remove that and run – Karthik Sivakumar Nov 22 '16 at 10:39
Thank you so much karthik. you are right, its because of color:transparent.Thanks again. – Walberg Nov 22 '16 at 10:46
Thank you. Please make my answer as the right one. Thanks again! – Karthik Sivakumar Nov 22 '16 at 11:43

score 0 · Answer 2 · edited May 23 '17 at 12:30

For jQuery 1.6+

To change the disabled property you should use the .prop() function.

$("input").prop('disabled', true); $("input").prop('disabled', false);

For jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

Set the disabled attribute.

$("input").attr('disabled','disabled'); To enable again, the proper method is to use .removeAttr()

$("input").removeAttr('disabled');

For more details Reference link.

jQuery `prop` method not functioning as expected

2 Answers2