Question

I’m using jQuery Validation Engine and prettyCheckboxes jQuery plugins for my WordPress site.

Initially JVE integrates compatibilty with a plugin that styles <select>‘s (jQuery selectBox) and I’ve been trying to do the same with an <input type="checkbox"> replacement plugin, prettyCheckboxes.

You have to add prettySelect : true as an option within the plugin initialisation, so I added a prettyCheckboxes : true to the plugin, which you can see in the gist below on lines 164, 330, 495, 693 and 1944 within the modified plugin.

As well as this you have to do some ID/class jiggery to make sure that IDs aren’t repeated and classes aren’t added where they shouldn’t be. I’ve also had to add in the “checked” attribute to the hidden <input type="checkbox"> so the JVE plugin picks up that it’s changed.

It works only up to the point where I can get an error message to display, but it’s wrong. Basically when you click on a checkbox, it registers the message to display and when you uncheck the message disappears; it’s vice versa. But when you click on other checkboxes once you’ve unclicked the first clicked, it doesn’t work at all unless you do it in the order you clicked initially. It’s really weird.

So my question is, how can I get prettyCheckboxes to work with JVE correctly? Obviously I’ve modified it incorrectly but I’m just not sure where or how to get it to work as intended.

Modified jQuery Validation Engine, prettyCheckboxes, custom HTML and scripts: https://gist.github.com/0349d8c92039fc8c6009
(sorry I can’t post more than two hyperlinks!)

Answer 1

For some reason some of my code was interfering with the plugin:

$('.custom-tick').click(function() {
    $(this).each(function() {
        if ($(this).hasClass('checked')) {
            $(this).siblings('input[type="checkbox"]')
                .attr('checked', true);
        } else {
            $(this).siblings('input[type="checkbox"]')
                .attr('checked', false);
        }
    });
});

I removed it and the checkboxes are activating the validation correctly.