CFF: Mutual exclusion between multiple Radio Button fields (icons)

  • Resolved svenomaier

    (@svenomaier)


    3 months, 4 weeks ago

    Hello,

    I am working with the Calculated Fields Form plugin on a WooCommerce site.

    I have a specific setup: I am using several different Radio Button fields, where each choice is represented by an icon. Because these icons are distributed across multiple CFF fields, the default behavior allows a user to select one icon in every field.

    My Goal: I want these separate Radio Button fields to act as one single group. If a user selects an icon in one field, the selection in all other related Radio Button fields must be cleared immediately.

    Important: My website is currently in maintenance mode, so I cannot provide a public URL.

    Could you please provide the correct jQuery snippet or logic to achieve this mutual exclusion? Also, please let me know if I should place the code in the “Custom JavaScript” area of the Form Settings or within a Calculated Field.

    I want to ensure the solution is compatible with the CFF internal events (like .change() or .click()) so that the form updates correctly.

    Thank you for your support!

    Sven

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author CodePeople2

    (@codepeople2)

    3 months, 4 weeks ago

    Hello @svenomaier

    Thank you so much for using our plugin. The process is simple:

    First, assign a custom class name to all radio button fields you want to treat as a group, for example radio-group (The class names are assigned to the fields through their attributes “Add CSS Layout Keywords”).

    Second, insert an “HTML Content” field in the form, tick the checkbox in its settings to support scripts, and enter the following piece of code as its content:

    <script>
       fbuilderjQuery(document).on('input', '.radio-group input', function(){
          let e = this;
          fbuilderjQuery('.radio-group input').prop('checked', false).trigger('change');
          e.checked=true;
      });
    </script>

    Best regards.

    Thread Starter svenomaier

    (@svenomaier)

    3 months, 4 weeks ago

    THX that worked really good 🙂

    Best Sven

    Plugin Author CodePeople2

    (@codepeople2)

    3 months, 4 weeks ago

    Hello @svenomaier

    Thank you very much for the feedback.
    If you have been satisfied with both the plugin and our support, we would be immensely grateful if you could leave us a review on the plugin ( https://ww.wp.xz.cn/support/plugin/calculated-fields-form/reviews/ ). Your feedback will help us reach more users. 

    Best regards. 

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.