Reply To: Prevent "disabled" on hidden conditional fields

• kender

• January 29, 2023 at 12:53 pm

@hube2

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

(function($){
  // 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')  ) {
          $(this).closest('.inside').find('.stored-default-group').removeClass('d-none');
        } else {
          $(this).closest('.inside').find('.stored-default-group').addClass('d-none');
        }
      }, 250);
    });
  });
})(jQuery);

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