Make some fields read-only on `Edit Form`

[pandabytes]

Hello.

I would like to know if it's possible to make certain fields on the Edit Form to be read-only. For example, I want to prevent the fields Country and City to be modified by user directly. But they can be changed by some other means such as setting it in the code, as long as they are not editable on the UI.

Use case

This is the user case that I'm trying to implement:

My application stores countries and cities (~47,000 total). I want FamilyTreeJS to have fields that let users specify the country & city. But it's not ideal to load all locations into the editForm.elements. So my thinking is I can create a dialog that allows user to select their location (see image below), and once they close the dialog, the Country and City fields in FamilyTreeJS will be updated with the location the user has selected. Hence the Country and City fields on the Edit form must not be editable because they are "edited" somewhere else (via the select location dialog).

Besides my question above about making fields read-only on Edit Form, do you think this use can be implemented with the select location dialog?

[ZornitsaPesheva]

Here is an example of a simple read only field: https://code.balkan.app/family-tree-js/read-only-element#JS Here is another example where we have made the image hyperlink read only: https://code.balkan.app/org-chart-js/readonly-edit-field#JS You can have "Select" link that opens your location form. Here you can see how you can do that: https://code.balkan.app/family-tree-js/image-upload#JS

[pandabytes]

@ZornitsaPesheva Awesome, thank you for the examples!