How to load some jquery code to make validation in the theme customizer?

by

i am tring to load some jquery code to make validation in the theme customizer. i have created 10 checkboxes to show some info. but i want to limited the user to choose only 5 checkboxes. so i have created jquery code to do so, and this code works fine when i put this code in the chrome console.

jQuery(document).ready(function($){ 
$("#section id input[type=checkbox]").click(function(){
    var countchecked = $("#section id input[type=checkbox]:checked").length;

    if(countchecked >= 2) 
    {
        $('#section id input[type=checkbox]').not(':checked').attr("disabled",true);
    }
    else
    {
        $('#section id input[type=checkbox]').not(':checked').attr("disabled",false);
    }
});
});

what i have missed? which codec i need to use to insert in functions.php that will load some jquery code when the user using customize.php (theme customizer)?

i want to make all the validation before user trying to save all the changes.

thanks for help.

1 Answer
1

Create a /js subfolder in your theme directory, if such does not exist already.
Save your script to a file in said folder.

Then, in functions.php:

if ( is_admin() ) {
    global $pagenow;

    if ( 'customize.php' === $pagenow ) {
        add_action( 'admin_enqueue_scripts', 'wpse107236_enqueue_customizer_script' );
    }
}

function wpse107236_enqueue_customizer_script() {
    wp_enqueue_script(
        'your-script-handle',
        get_template_directory_uri . '/js/your-script.js',
        array( 'jquery' ),
        '1.0',
        true
    );
}

Related Resources:

  • WordPress globals
  • admin_enquque_scripts hook
  • wp_enquque_script function

Leave a Comment