Why isn't my custom Form API #states applied in my webform yaml editor working?

Question

I have the need to set visibility state of a checkbox option in one question (Table checkbox select) based on the value of another checkbox in the same table. I also have other scenarios where I would need same functionality but across different questions in the same webform.

I know I can easily do it between two different questions ( 2 different elements) with the built-in conditional logic UI in webform but no such UI option for my case now (afaik) so I'm trying to set it via the custom one and this is my first time with form states and custom condition in webform so I appreciate your kind help so greatly.

I went through trials and errors and the code wasn't being saved till I, thanks to @jrockowitz 's tip, learnt that I was using php code where I need to use yaml code since I'm using the yaml source editor (shown in the screenshot below). When I fixed that, my custom code would save and it reflects as entered in the webform source yaml. However, the custom condition is still not working as expected and I'm still not sure why.

I'm adding the code in the Edit source box accessible via clicking its link on the form "Conditions" tab.

I got the selectors for the involved question options from the "Available selectors" list by clicking on the "Help" link under "Learn more about Drupal's Form API #states." on the "Conditional Logic" for the element editing tab in my webform.

This is a sample full yaml code for the form with a sample question and what I want to achieve but not yet working:

some_question:
  '#type': tableselect
  '#title': 'some question'
  '#options':
    q1: 'q1 (hide if q2 is checked)'
    q2: 'q2 (hide if q1 is checked)'
    q3: q3
    q4: q4
    q5: q5
    q6: q6
    q7: q7
  '#states':
    ':input[name="some_question[q2]"]':
      invisible:
        ':input[name="some_question[q1]"]':
          checked: true
    ':input[name="some_question[q1]"]':
      invisible:
        ':input[name="some_question[q2]"]':
          checked: true          

What am I missing here ?!

• For those who maybe aren't familiar with the UI edit source, this is a link with info and screenshots : https://www.drupal.org/node/3012686

• Note: As per @leymannx 's kind advice, I re-wrote the whole question to rid it of my dump of updates with my trials and errors. I hope it's now cleaner, clearer and more worthy of up-votes :)

Answer 1

For the simple case where Question 2 is shown only if Question 1 is left unchecked, your YAML doesn't look right to me. If you're editing YAML in the conditions tab for the Question 2 checkbox, then just the last 3 lines should suffice:

invisible:
  ':input[name="some_question[q1]"]':
    checked: true

I don't think you want the "#states" key to be in there anywhere, nor do you want to include any selector information for Question 2.

That's if the YAML is part of Question 2's Condition source. If on the other hand the YAML you're showing is part of the form's source, then it should probably look something like this:

q2:
  '#type': checkbox
  '#title': 'Question 2'
  '#states':
    invisible:
      ':input[name="some_question[q1]"]':
        checked: true

Note that the #states key is shown here, but only once - we're omitting 2 out of 3 of the same lines as above.