Disable CheckBox Input Based on Select Field

In this guide, we will explain how to disable the CheckBox Input based on Select Field.

Click “New Form”.

Click “Rename” to give your new form a name.

Drag and Drop a Header, a JavaScript, a Select and a CheckBox element.

Click the “pencil” icon and use the below code for JavaScript.

JavaScript Code:

// On selecting option from select list
formyoula.form_fields[ 'Select List' ].on( 'all', function() {
  // check if option selected is Enable Checkbox
  if ( this.get( 'value' ) == 'Enable Checkbox' ) {
    // Remove the existing attribute
    formyoula.form_fields[ 'Checkbox Field' ].attributes.attributes.options = [];
    // Trigger change to update the attributes
    formyoula.form_fields[ 'Checkbox Field' ].trigger( 'change' );
  }
  // If value is Disable Checkbox
  else if ( this.get( 'value' ) == 'Disable Checkbox' ) {
    // Add the attribute to disable input
    formyoula.form_fields[ 'Checkbox Field' ].attributes.attributes.options = [ {
      attribute: 'disabled',
      type: 'input',
      value: 'true'
    } ];
    // set value false
    formyoula.form_fields[ 'Checkbox Field' ].set( 'value', false );
    // Trigger change to update the attributes
    formyoula.form_fields[ 'Checkbox Field' ].trigger( 'change' );
  }
  // else if value is none selected
  else {
    formyoula.form_fields[ 'Checkbox Field' ].attributes.attributes.options = [ {
      attribute: 'disabled',
      type: 'input',
      value: 'true'
    } ];
    // set value false
    formyoula.form_fields[ 'Checkbox Field' ].set( 'value', false ); 
    // Trigger change to update the attributes
    formyoula.form_fields[ 'Checkbox Field' ].trigger( 'change' );
  }
} );

Click the “Pencil” icon and give options to your Select list.

6. Click “ Save & Close” to save the form.

Try the Form. Now you can enable CheckBox by Selecting the option.

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