Today I came across an interesting use case. I had a customer that had multiple radio button fields in his form. Each field has in turn different choices. He only wanted visitors to select one radio button across all the different fields.
Use case example
Field A has three choices (1,2,3)
Field B has three different choices (4,5,6)
Field C has three different choices (7,8,9)
When the user selects from Field A but later also selects something from field C then we want the selection in field A to be removed (unselected). This is exactly what this small jQuery snippet can do for you!
How do I enable this?
1. Check the requirements
This snippet works only in combination with Gravity forms so you will need to have Gravity Forms installed and activated.
2. Add css class.
Each radio field that needs to use this functionality will need the same css class. Navigate to the appearance tab of your field and add “gotr_limit_radio” to the css class box.
3. Add snippet.
Simply copy the snippet to an html field and make sure you wrap it between <script> Snippet goes here </script>
Need help?
Reach out by leaving a comment or send me a message through the contact form
Hi, nice post. I use it in one of my forms. Only have a problem with conditional logic fields. If someone click on field C who have conditional logic and then select something else from other section conditional fields are still visible on the page.
Do you have solution for that?
Thanks for your comment and thanks for pointing that out. I have updated the snippet above. The updated version will be compatible with conditional logic! Please let me know how this works for you.