In the collection I have created (see below) is there a way that once I had completed the fields you can see and click 'Add', the fields I had just completed became read only?
Could someone confirm if that is possible?
Thanks
In the collection I have created (see below) is there a way that once I had completed the fields you can see and click 'Add', the fields I had just completed became read only?
Could someone confirm if that is possible?
Thanks
I'm not sure that it can be done out-of-the-box, but here is a solution that could get you started.
This example takes one Single Line field which has the ID of 3 so you would replace q3 and #Field3 with the correct.
I would also check that that there are no empty fields before allowing to add a second set to the collection.
The second function also makes the previous field non-readonly in case you decide to remove an item from the collection.
$(document).ready(function(){ $(document).on('click', '.cf-collection-append', roItems); function roItems() { var items = document.getElementsByName("q3").length; // this is the textbox $("#Field3\\(" + (items-1) + "\\)").prop("readonly", true); } $(document).on('click', '.cf-collection-delete', reItems); function reItems() { var items = document.getElementsByName("q3").length; // this is the textbox $("#Field3\\(" + (items) + "\\)").removeAttr("readonly"); } });
Hi Raul,
Thanks for getting back to me.
Im a little confused with your first sentence and how you're applying the 'q3' and '#Field3' ?
Could you show me the relevant CSS class in your example to help me understand a little better.
Thank you!
Sure. And this is just a mere example.