Ask your WordPress questions! Pay money and get answers fast! (more info)

JQuery script to disable first dropdown option based on selection using *Gravity Forms Repeater Add-On*


I have multiple dropdowns with the same options inside Gravity forms Repeater Add-on and need the first option to be selected only once. So the first option would be disabled in the other dropdowns once it is selected. The option in the drop-down that can be selected only once value is 'battery' This fiddle is similar except I need to disable only the first option once selected also it needs to work with gravity forms repeater add-on.

Script examples for gravity forms repeater add-on:

Answers (1)


Francisco Javier Carazo Gil answers:

Yes you can use the same JS but you have to enqueu in the page that you are showing the GravityForm and yes, you have to change the IDs of each list to the ones generated by CF7.

Sspro comments:

Thank you for looking into this. I understand the ID's need to be changed to the gravity form ID's I was able to get that far but when I drop the script into an HTML box in gravity forms it no longer works.

Here's an updated fiddle with the ID's

For reference the form ID is '4'

Also, the current script is set so no options can be selected twice, I need it so only the first option in the dropdown, option value="battery" is unable to be selected multiple times.

Francisco Javier Carazo Gil comments:


In the fiddle it is working.

Surely, use and HTML box in CF7 is not the best idea.

You can edit your functions.php and then use it in this way:

add_action( 'wp_footer', 'cod_footer' );
function cod_footer(){
if( !is_page( id_of_page_of_cf7 ) )
<script>your script here </script>

Sspro comments:

I had to adjust the script slightly I was getting an error the new script is at

I got it to work in gravity forms by adding the functions below to functions.php

add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

add_action( 'gform_enqueue_scripts', 'enqueue_custom_script', 10, 2 );
function enqueue_custom_script( $form ) {

wp_enqueue_script( 'custom_script', '/script.js', array( 'jquery' ) );

add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );


However, it does it not work with the repeater add-on for gravity forms wich is where the dropdowns are located. The repeater add-on can be manipulated with javascript.

Exaple of Gravity forms repeater add-on script from their site
Change the value of a field if the repeater is repeated or un-repeated:

jQuery('#gform_9').on('gform_repeater_after_repeat gform_repeater_after_unrepeat', function(event, repeaterId, repeatId){
if (repeaterId == 1) {
var repeatCount = gfRepeater_repeaters[9][1]['data']['repeatCount'];
var totalPrice = 27.47 * repeatCount;
jQuery('#gform_9 #input_9_4').val('$'+totalPrice);

Any suggestions?

Francisco Javier Carazo Gil comments:

Yes, as the controls are created dinamically, the standard methods of jQuery maybe is not working correctly.

So I would need to take some time in it, and sorry but the prize is too low to spend time doing more tests.