Bij uitgebreide formulieren waarbij een resem aan opties zijn had een klant van mij een oplossing nodig om het limiet in te stellen bij selectievakjes (checkboxes). Er waren een kleine 500 mogelijkheden en het limiet lag op 20 vinkjes.

Mijn klant probeerde verschillende WordPress contactformulieren waaronder Contact Form 7, Caldera Forms én Ninja Forms. Bij geen enkele plugin was dit een core functie. Er moest dus extra code bijkomen om te verhinderen dat de bezoeker er meer kan aanduiden.

Javascript stukje

Er dient een stukje code ingeladen te worden die voorkomt dat er meer dan het gewenste aantal vinkjes worden aangevinkt. Hiervoor gebruikte ik dit stuk:

jQuery(function($){
    var max = 20;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
    });
});

Even een woordje uitleg hierover.

Ik zet in de max variabele het gewenste maximum aantal, daarna ga ik op zoek naar de selectievakken op de pagina en die worden bewaard in de variabele checkboxes. Op regel 5 schrijf ik een functie die luistert wanneer er een verandering is op het selectievak. Bij elke verandering kijkt hij naar het huidige aantal door de lengte te berekenen. Is de lengte groter dan het maximum, dan krijgen alle andere mogelijkheden de disabled eigenschap. Vanaf dan kan er geen extra vak meer aangeduid worden.

Script inladen op een specifieke pagina

De bedoeling is natuurlijk dat deze code enkel uitgevoerd wordt op de juiste pagina waar het desbetreffende formulier aanwezig is. Hiervoor schreef ik een aparte plugin die op slug filtert. Enkel wanneer de slug overeen komt met de pagina wordt het javascript bestand ingeladen. Hiervoor gebruikte ik deze code:

function contactform() {
    if(is_page('page-slug')) {
        wp_register_script( 'jerrixit_contactform', get_stylesheet_directory_uri() . '/jerrixit.js', array( 'jquery' ) );
        wp_enqueue_script( 'jerrixit_contactform' );
    }
}
add_action( 'wp_enqueue_scripts', 'contactform' );

De is_page() functie komt hier handig van pas.