limitListSelection.js

jQuery( document ).ready( function(){
    var myListController = Marionette.Object.extend({

        initialize: function() {
            
            // Listen to the value change for Checkbox List fields.
            this.listenTo( Backbone.Radio.channel( 'listcheckbox' ), 'change:modelValue', this.onChangeModelValue );
        },

        onChangeModelValue: function( fieldModel ) {
            
            // Use the field key to check for a specific field.
            // The field key can be set/checked in the field's settings (under the Administration section).
            if( 'my_checkbox_list' !== fieldModel.get( 'key' ) ) return;
            
            // Set the limit of options to select.
            var limit = 9;

            var value = fieldModel.get( 'value' );

            _.each( fieldModel.get( 'options' ), function( option ){

                // If the option is not selected and the limit has been reached...
                if( ! value.includes( option.value ) && Array.isArray( value ) && limit <= value.length  ){
                    
                    // Disable the unselected option.
                    jQuery( '#nf-field-' + fieldModel.get( 'id' ) + '-' + option.index ).attr( 'disabled', 'disabled' );
                } else {
                    
                    // Enable the option, selected or not.
                    jQuery( '#nf-field-' + fieldModel.get( 'id' ) + '-' + option.index ).attr( 'disabled', false );
                }
            });
        }

    });

    new myListController();
});

Hi there,

Where would I insert this javascript for the Ninja Form?

for: this.listenTo( Backbone.Radio.channel( 'listcheckbox' ). I would like to listen for a change to a dropdown (select) field. So.. how can I find out what selectors to use for the various field types? Is there a guide somewhere? Can I tell it to listen to a field by key maybe?

I can't seem to get this to work. Is it up to date for recent ninja forms versions? Thanks!

I can't seem to get this to work. Is it up to date for recent ninja forms versions? Thanks!

+1

I can't seem to get this to work. Is it up to date for recent ninja forms versions? Thanks!

I can't seem to get this to work. Is it up to date for recent ninja forms versions? Thanks!

+1

Hi I know this is a late response. But I just set this up myself and its working great.

After embedding the code however you like (plugin, child theme enqueue etc.) be sure to go into ninjaforms settings and enable dev mode.

After that, go back to your form, select your checkbox list, open the new "administration" panel and make sure your field key is set to "my_checkbox_list" OR set your own key and edit the key in the code itself.

I hope that helps!