Solved
Using jQuery to make a field read only
I am trying to use jQuery to make one of my text inputs read only. I noticed there were a few other solutions to this problem on the forums, but none of the other solutions worked for me. Here is an example of a few things I have tried:
jQuery("#QR~QID1_3_1").prop("readonly", true);
and
jQuery("[id='QR~QID1_3_1']").attr("readonly",true);
Any help or suggestions would be greatly appreciated. Thanks!
Best answer by JeremyK
Oh! Should've included that in my response! You'll want to get the Id from the survey preview. Open the survey preview and advance through the survey until you get to your desired question. Right click the text box and select _Inspect_ (I'm using Chrome, FireFox and IE call it _Inspect Element_). This brings up the developer tools window on the right side. The element you selected will be highlighted already. You need to find the id= and copy the text in the double quotes. One example from the survey I've got up is a text box `<input autocomplete="off" class="Medium InputText QR-QID2-1 QWatchTimer" id="QR~QID2~1" name="QR~QID2~1~TEXT" style="width:200px;" type="text" value="" data-runtime-textvalue="runtime.Choices.1.Text">`. If I was trying to grab the element to use with JS/jQuery, I'd use the "QR~QID2~1", so jQuery("#QR~QID2~1").prop("readonly",true).
I may have added the ~TEXT mistakenly; I was thinking you'd need it, but that is only on Matrix tables where you check the 'Allow Text Entry' option. My bad on that. Hope that clears it up for you? :)
+7I believe your jQuery is correct, but your element search looks off. When I grab an element ID, mine always has tildas (~) instead of underscores. So yours would probably be "#QR~QID1~3~1". Try `jQuery("#QR~QID1~3~1~TEXT").prop("readonly",true);` and see what that gets you. Any questions, just ask!
Unfortunately, this still did not work. Thanks for responding though!
I grabbed the element ID from the third row of the exported .csv file. Is this the proper place to find the element ID?
Otherwise, I am very confused!
+7Oh! Should've included that in my response! You'll want to get the Id from the survey preview. Open the survey preview and advance through the survey until you get to your desired question. Right click the text box and select _Inspect_ (I'm using Chrome, FireFox and IE call it _Inspect Element_). This brings up the developer tools window on the right side. The element you selected will be highlighted already. You need to find the id= and copy the text in the double quotes. One example from the survey I've got up is a text box `<input autocomplete="off" class="Medium InputText QR-QID2-1 QWatchTimer" id="QR~QID2~1" name="QR~QID2~1~TEXT" style="width:200px;" type="text" value="" data-runtime-textvalue="runtime.Choices.1.Text">`. If I was trying to grab the element to use with JS/jQuery, I'd use the "QR~QID2~1", so jQuery("#QR~QID2~1").prop("readonly",true).
I may have added the ~TEXT mistakenly; I was thinking you'd need it, but that is only on Matrix tables where you check the 'Allow Text Entry' option. My bad on that. Hope that clears it up for you? :)
+27According to standards, tilde (~) isn't supposed to be used in id strings. Therefore, jQuery doesn't support it. To use a tilde in jQuery you either have to double escape it or use the id as if you are selecting an attribute. So, you could use:
```
jQuery("#QR\\\\~QID1\\\\~3\\\\~1")
```
or alternatively selecting as an attribute:
```
jQuery("[id=QR~QID1~3~1]")
```
+7Good deal, glad to hear it! If you could accept both our answers as accepted answers, that'd be much appreciated, thanks!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.