如何修复Contact Form 7重复组忽略JavaScript脚本的问题？

我正在使用Contact Form 7结合Conditional Fields构建表单，编写了一段JavaScript脚本用于禁用下拉菜单中的“Please select…”选项，但仅第一个重复组生效，其余重复组完全忽略该脚本。此外，将相同代码部署到WordPress后，重复组不仅忽略脚本，还出现格式异常，但当前重点解决Contact Form 7的问题。

表单代码 #

<legend>Property</legend><label>How many properties will be used as collateral? <span>*</span></label>[number* property-quantity-how-many-properties-will-be-used-as-collateral id:num-properties min:0]

[group property_quantity_how_many_properties_will_be_used_as_collateral_greater_than_or_equals_5]
<div id="portfolio">
  <label>Upload portfolio file (.xls, xlsx, .csv, .pdf)</label>
  [multifile property-portfolio filetypes:pdf|.xls|.xlsx|.csv limit:2mb]
</div>[/group]

[group property_quantity_how_many_properties_will_be_used_as_collateral_less_than_5]
[repeater properties]
<label>How far along is the borrower in acquiring the property? The borrower… <span>*</span></label>[select* property-ownership-how-far-along-is-the-borrower-in-acquiring-the-property-the-borrower class:wpcf7-select "Please select…" "is still looking for a property to acquire." "has identified the property." "has made an offer to purchase the property." "has the property under contract to purchase." "already owns the property."]
[/repeater]
[/group]

<script>
    (function($){
        $numProp = $('#num-properties');
        $numProp.on('change',function(){
            wpcf7cf.repeaterSetNumberOfSubs('.wpcf7-form','properties',$numProp.val() || 0);
        });
    })(jQuery)
</script>

<script>
(function ($) {
   'use strict';
   $(document).ready(function () {
       var $select = $('.wpcf7-select');
       $select.each(function(e){
         var first_option = $(this).find('option').first();
         if(first_option.attr('value') == 'Please select…'){
           first_option.attr('disabled', true);
         }
     })
  });
})(jQuery)
</script>

<style>
    .wpcf7cf_repeater_controls { display:none; }
</style>

效果截图 #

问题根源是你的脚本仅在页面首次加载时执行一次，而Conditional Fields的重复组是动态生成的，后续新增的重复组元素不会被初始的$(document).ready代码处理。

修改后的完整脚本 #

替换原有两个<script>标签为以下代码：

(function ($) {
    'use strict';

    // 封装禁用默认选项的可复用函数
    function disableDefaultSelectOption() {
        $('.wpcf7-select').each(function() {
            const firstOption = $(this).find('option').first();
            if (firstOption.val() === 'Please select…') {
                firstOption.prop('disabled', true);
            }
        });
    }

    // 页面加载完成时初始化
    $(document).ready(function () {
        disableDefaultSelectOption();

        // 监听重复组新增事件（Conditional Fields内置钩子）
        $(document).on('wpcf7cf_repeater_added', function() {
            disableDefaultSelectOption();
        });
    });

    // 处理数量输入框的逻辑，新增后触发禁用函数
    const $numProp = $('#num-properties');
    $numProp.on('change',function(){
        wpcf7cf.repeaterSetNumberOfSubs('.wpcf7-form','properties',$numProp.val() || 0);
        // 批量生成重复组后手动触发一次禁用逻辑
        disableDefaultSelectOption();
    });
})(jQuery)

关键改进点 #

1. 封装可复用函数：把禁用下拉选项的逻辑抽成独立函数，方便多次调用
2. 监听重复组事件：利用Conditional Fields提供的wpcf7cf_repeater_added事件，每次新增重复组后自动处理新生成的下拉框
3. 批量生成后手动触发：调用repeaterSetNumberOfSubs批量生成重复组时，不会触发wpcf7cf_repeater_added事件，因此需要手动触发一次禁用函数
4. 使用prop替代attr：对于动态生成的元素，prop设置属性比attr更可靠，能确保禁用状态正确生效

内容的提问来源于stack exchange，提问作者Albert Pace