Conditional Logic Between Sub Fields

• J.S.

• June 10, 2018 at 5:07 pm

What am I trying to do?
Please have a look at the image.
For the selection of the options given I like to limit some to certain combinations.

If “Text Position” is “Left” then “Image Position” can only be “Right” or “Full” and “Video” group should be disabled.

Or if “Image Position” is “Right” then “Text Position” can only be “Left” or “Full” and “Video” group is disabled.

Or if “Video Position” is “Full” then “Text” and “Image” groups are disabled.

I understand I need to do this with jQuery/JS and have hence looked at this.
https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

I have made a Javascript file and correctly enqueued it like explained in above link.
Current content of the file is this.

acf.add_action("ready", function($el) {
  
  // Get field text_position checked value
  var $text_pos = $('[data-name="text_position"] input:checked');
  console.log("text_position = " + $text_pos.val());

  var posButtons = document.getElementsByTagName("label");

  for (var i = 0; i < posButtons.length; i++) {
    posButtons[i].addEventListener("click", function() {

      // console.log(this.closest(".acf-row"));
      console.log(this);
    });
  }
});

The console correctly shows me the value of the text_position field, that is fine.
However, now to be able to check and change the various position values on click I am first of all trying to see what button has been clicked.
This also work, however with a quirk that I do not understand.

On click of any of the position buttons the console logs the correct label twice.
Why is this happening?
Does the click event bubble up or is there something else that could be the cause?

Note that this happens regardless of what action hook I choose.
Ready, load, append, remove, the log always displays two identical label buttons.

Text, Image and Video are Sub Fields of the field group Slideshow.
Each Sub Field starts with a Repeater Field and then has a Button Group field for the options “Left”, “Right” and “Full” in case this helps.
I am running version 5.6.10 of ACF Pro.

Thank you for any insights, pointer, links, tuts or help you can provide.
Before I dive into the logic between the fields I like to find out why I am getting two log results for the identical field.