JS Question Follow Up

[timmy321]

Hi Steven,

Apologies for posting another post but I keep getting kicked out of the forum when trying to reply to your reply on my JS question post. I get stuck in a loop of verifying my login details, logging in then get kicked out as soon as I click on the JS post.

Anyway, thank you very much for your help with that. It works perfectly!

—

I’ve managed to hide the ‘child box’ now too (I think that’s what it’s called?), using this:

.wpgmza-placeholder-label > ul.wpgmza-checkboxes > li {
display: none;
}

I’m now struggling however to write a function with CSS that will alert the user to the fact that they have clicked on the button. (I thought the :active trick would suffice but it reverts back to it’s original design once the user ‘un clicks’).

Here’s the example CSS (p.s I don’t think changing the colour to red is the most ideal way of doing this but I’m just trying to figure out the CSS):

.wpgmza-filter-widgets [data-field-id]:active {
background-color: red;
}

What would be more ideal is if the box displayed a tick or something similar to indicate to the user that they have pressed this.

Is this possible?

Really big thanks for your help here!

Tim

[timmy321]

Sorry, in follow up to that second bit of JS too. I’ve just noticed that it does select the first child box when clicking on the custom field, however it doesn’t seem to have an effect on filtering out those options on the map itself.

I hope that makes sense?

Thanks,

Tim

[Steven]

Hi Tim,

Could I kindly ask you to remove the previous JavaScript?

It looks like a change event needs to be triggered, however, I cannot test with both scripts running.

Kindest Regards,
Steven De Beer

[timmy321]

Hi Steven,

Ah yes, sorry about that. I’ve removed it now.

Many thanks!

Tim

[Steven]

Hi Tim,

Thank you so much for getting back to me.

Could I ask you try the following?

jQuery(function($){
    jQuery('[data-field-name]').on('click', function() {
        var checkbox = jQuery(this).find('input');
        var parent = jQuery(this);

        if(checkbox.is(':checked')){
            checkbox.prop( "checked", false );
            checkbox.trigger('change');

            parent.css('background', 'white');
        } else {
            checkbox.prop( "checked", true );
            checkbox.trigger('change'); 

            parent.css('background', '#ff9b9b');
        }

    });
});

As for the CSS to hide the check box element, kindly find this below:

.wpgmza-placeholder-label .wpgmza-checkboxes {
    display: none !important;
}

Kindly let me know if this helps?

Kindest Regards,
Steven De Beer

[timmy321]

Hi Steven,

You must be a code wizard! That’s perfect. I can’t express how much I appreciate your help with that.

Thank you so much.

Kind regards too,

Tim

[Steven]

Hi Tim,

Thank you so much for getting back to me.

Not a problem at all, do have a great weekend ahead!

Kindest Regards,
Steven

[Author]

Posts