Home › Forums › General Issues › Prevent "disabled" on hidden conditional fields › Reply To: Prevent "disabled" on hidden conditional fields
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
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.