Home Forums General Issues Prevent "disabled" on hidden conditional fields Reply To: Prevent "disabled" on hidden conditional fields

  • @hube2

    I wanted to show you my solution, and make it available for others in case they need it

      // run when ACF is ready
      acf.add_action('ready', function(){
        // show/hide default banner on toggle
        $('.stored-default-group-trigger .acf-switch-input').on('change', function() {
          setTimeout(() => {
            if( $(this).siblings('.acf-switch').hasClass('-on')  ) {
            } else {
          }, 250);

    For those who need it, an explanation of it in use

    I have my fields hidden by default, so I identify them with 2 classes
    – stored-default-group d-none

    I have my toggle identified by a single class
    – stored-default-group-trigger

    When the toggle (true/false Boolean) is clicked, it changes the input inside that elements value between 0/1/1 (only stays on 1, but continues triggering the “change”), so I look at the ‘change’ trigger on that input

    When it changes, I check the sibling element of this which shows the toggle is on or off (as the input stays 1, this is the best test I can use). It takes a short while to get the -on class, so I throw in a short wait before looking for it

    if it is on (for me, the “show hidden” value), I will remove the “d-none” class from the “stored-default-group” items, if it is off I add it back

    I don’t need to add in a check on the “add more items” button (its a repeater) to show the hidden fields, which is awesome, as they follow the initial fields class and are shown/hidden properly when new row is added

    Side note… if anyone wants to clean this up and make it more efficient, I wouldn’t object