Enable readonly textbox after saving changes

Question

I have some form which is editable in the same page. First attribute for each textbox is readonly, and when I press the edit button, it will become editable, using this syntax

$('input[readonly="readonly"]').removeAttr("readonly").prop("enabled",true);

when i press the save button, i want it become readonly again. I've trying to change it to

 $('input[readonly="readonly"]').attr("readonly").prop("disable",true);
  and
 $('input[readonly="readonly"]').attr("readonly").prop("readonly",true);

but it won't change into readonly again.

Is there any proper way to do this?

fliedonion · Accepted Answer · 2013-07-12T11:56:01.497

0

readonly attributes was removed when you press the edit button.

so, $('input[readonly="readonly"]') doesn't match anything.

For example,

$('input[type="text"]').attr("readonly", "readonly");

will set all textboxes to readonly.

edited Jul 12 '13 at 11:56

answered Jul 12 '13 at 11:48

fliedonion

912
8
13

@randytan if you want to specify the textbox. you need set class, name or id to target textboxes. – fliedonion Jul 12 '13 at 11:58
Check my answer, maybe you want to add an ID for your textbox and use that to select. Choosing the selectors depends on your HTML – Lzh Jul 12 '13 at 11:58
okay, i just use type="text" and it works. I prefer not to add additional ids or name to make it disable, because, in my page there are more than 100 text inputs. thanks guys – randytan Jul 12 '13 at 12:03

Arun P Johny · Answer 2 · 2013-07-12T11:55:07.577

0

you need to

$('<your-selector>').prop("disable",true).attr("readonly", "readonly");

because calling .attr("readonly") just returns the value of the attribute readonly, here you need to set the readonly property value for that you need to pass two arguments to .attr()

edited Jul 12 '13 at 11:55

answered Jul 12 '13 at 11:49

Arun P Johny

384,651
66
527
531

what do you mean by selector? it is just input? because there are a lot input ids. So i just need to place "input" only? thanks – randytan Jul 12 '13 at 11:52
@randytan how to identify your target input element, does it have a name/id/class – Arun P Johny Jul 12 '13 at 11:55
yes it has ids and name. but every input type has different ids and name. Is there any way to make it one hit kill? :D – randytan Jul 12 '13 at 11:57
add a common class attribute to all the target elements – Arun P Johny Jul 12 '13 at 11:57

score 0 · Answer 3 · answered Jul 12 '13 at 11:57

In $('input[readonly="readonly"]').attr("readonly").prop("disable",true);, the selector that you are using is looking for an input that is already readOnly I don't think that you want to make a readOnly input readOnly.

Give it an ID or find another way to select it then do $("#myInput").attr("disabled", "disabled"). Tested on chrome.

Enable readonly textbox after saving changes

3 Answers3