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.