JetFormBuilder - Checkbox field limit based on user role or guest

jetformbuilder

// Reference by default https://gist.github.com/Crocoblock/d8bcacb6c851ae670bc0514f2f9173d6
// In the jetformbuilder checkbox field - use the Advanced section - Class field name, and add: check-limit
// place the code in the child theme functions.php or a custom code snippets plugin.
// You can define if the user not logged in how many checkbox can check. This is the : 'guest' => 1, 

// HOW TO
// In the $limits = [ add your role name like 'mycustomrole" => 4, where the "mycustomrole" is your role cap name, and the "4" is the limit

// Dont forget to target your checkbox field, in the form gutenberg editor like the image: https://prnt.sc/FjqDLNL_q78m
// CSS Class name:  check-limit

// you can overwrite the check-limit css class target here: if ( 'checkbox' !== nodeMain.type || !nodeMain.classList.contains('check-limit') ) {
// ('check-limit') 

// In the const roleNames = { you can add the role cap name and a human readable version

function my_custom_checkbox_limits() {
    $user = wp_get_current_user();
    $role = is_user_logged_in() ? $user->roles[0] : 'guest';

    $limits = [
        'administrator' => 4,
        'subscriber' => 3,
        'customer' => 2,
        'guest' => 1, // Guest (not logged in user limit)
    ];

    return $limits[$role] ?? 0; // but If you are logged in, but have a role that you have not defined in the list, you can default to 0. Change the number to another value if necessary.
}

add_action( 'wp_footer', 'add_custom_checkbox_limit_script' );
function add_custom_checkbox_limit_script() {
    $limitCount = my_custom_checkbox_limits();
    $currentRole = is_user_logged_in() ? wp_get_current_user()->roles[0] : 'guest';
    ?>
    <script type="text/javascript">
    ( function( $ ) {
        let actionsAdded = false;

        $( document ).on( 'jet-form-builder/init', addActions );

        function addActions() {
            actionsAdded = true;

            const {
                addAction,
            } = JetPlugins.hooks;

            const roleNames = {
                'administrator': 'Administrator',
                'subscriber': 'Subscriber',
                'customer': 'Customer',
                'guest': 'Guest'
            };

            addAction(
                'jet.fb.input.makeReactive',
                'jet-form-builder/checkbox-limit-restriction',
                function ( input ) {
                    const [ nodeMain ] = input.nodes;
            
                    if ( 'checkbox' !== nodeMain.type || !nodeMain.classList.contains('check-limit') ) {
                        return;
                    }

                    let limitCount = <?php echo $limitCount; ?>;
                    let currentRole = '<?php echo $currentRole; ?>';
                    const wrapper     = nodeMain.closest( '.jet-form-builder-row' );
                    const messageNode = document.createElement( 'div' );
                    
                    messageNode.classList.add( 'warning-text' );
                    messageNode.innerHTML = 'As a <b>' + (roleNames[currentRole] || 'User') + '</b>, you can only select up to ' + limitCount + ' items.';

                    input.watch( () => {
                        const { length: count } = input.value.current;
            
                        const isFull = count >= limitCount;
            
                        for ( const node of input.nodes ) {
                            if ( node.checked ) {
                                continue;
                            }
            
                            node.disabled = isFull;
                        }
            
                        if ( isFull ) {
                            wrapper.append( messageNode );
                        } else {
                            messageNode.remove();
                        }
                    } );
                },
            );
        }
    }( jQuery ) )
</script>
    <?php
}