Disable Fields In Repeat Group Based On Checkbox Value

In this guide, we will share an example of disabling fields in a repeat group when adding new entries and editing existing repeat entries.

image
// Array of field IDs to listen for changes
var tracked_field_ids = [
	'a812-9456-3264' /* Checkbox Field */
];
var tracked_repeat_group_id = '9da3-bdd8-dd35'; /* Repeat Group */

// Update field attributes after a field is changed
function update_field_attributes( options ) {
	// Check field values and update field attributes
	// Check for a specific tracked field - Checkbox Field
	if ( options.changed_field.get( 'component_id' ) == 'a812-9456-3264' ) {
		// Update fields in the repeat group entry - Text Field
		var target_field = options.repeat_fields.findWhere( {
			component_id: '6769-42ff-13f9'
		} );
		// Check for a specific field value
		if ( options.changed_field.get( 'value' ) == true ) {
			// Set target field HTML attributes
			target_field.get( 'attributes' ).options = [ {
				type: 'input',
		    attribute: 'disabled',
		    value: 'true'
			} ];
		} else {
			// Set target field HTML attributes
			target_field.get( 'attributes' ).options = [];
		}
		// Trigger field change
		target_field.trigger( 'change' );
	}
}

// Listen to the new repeat entry fields
for ( tracked_field_id of tracked_field_ids ) {
  // Add field listener
  window.formyoula.form_fields[ tracked_field_id ].on( 'input:set:success', function() {
    // Update attributes
    update_field_attributes( {
      changed_field: this,
			repeat_fields: window.formyoula.form_fields[ tracked_repeat_group_id ].get( 'components' ),
			is_existing_entry: false
    } );
  } );
}

// Listening to all field changes in an existing repeat group item
formyoula.form_fields[ tracked_repeat_group_id ].on( 'all', function( event, data ) {
  // Check if field updates are available
  if ( !data || _.isEmpty( data.updated_sub_component ) ) return;
  // Get the actual field that was changed
  var component = data.updated_sub_component;
  // Check if repeat field component changes should be tracked
  if ( tracked_field_ids.includes( component.get( 'component_id' ) ) ) {
    // Update date fields
    update_field_attributes( {
      changed_field: component,
			repeat_fields: data.updated_repeat_item,
			is_existing_entry: true
    } );
  }
} );

Example form template:

[Example Form] Repeat Group Disable Fields With Checkbox.json6.1KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂