Forminator 表单 - 强制用户在特定复选框中选中一定数量的选项

Question

问题是这样的：我用forminator插件创建了一个表单。该表单包含 12 个复选框，我希望用户能够选择一定数量的复选框（1 表示复选框 1 到 10，8 表示复选框 11 和 12）。我在网上找到了限制复选框的代码：

<?php
/**
 * Plugin Name: [Forminator Pro] - Restrict select the multiple field(s).
 * Description: [Forminator Pro] - Restrict select the multiple field(s) (select/checkbox).
 * Author: Thobk @ WPMUDEV
 * Jira: SLS-918
 * Author URI: https://premium.wpmudev.org
 * License: GPLv2 or later
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
} elseif ( defined( 'WP_CLI' ) && WP_CLI ) {
    return;
}
/**
 * 1. Add custom class wpmudev-option-limit inside STYLING tab of a multiple field's settings: https://share.getcloudapp.com/KoulYdY9
 * 2. Enter the form id(s) in the snippet code bellow that you want to apply this custom code: form_ids: [123, 456]
 * 3. Modify the limit for each MU field:
 * limit: {
 * 'checkbox-2': 5,//[field-id]:[limit]
 * 'select-1': 2
 * }
 */
add_action( 'wp_footer', function(){

    global $post;

    if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }

    ?>
    <style>
        .forminator-ui .wpmudev-option-limit .wpmudev-disabled{
            color:#ddd!important;
        }
        .forminator-ui .wpmudev-option-limit .wpmudev-disabled span[aria-hidden]{
            border-color: #ddd!important;
        background-color: #ddd!important;
        }
    </style>
    <script type="text/javascript">
        
        ($=>{

            const _forminator_restrict_multiple_fields = {
                form_ids: [10097],
                limit: {
                    'checkbox-1': 1,
                    'checkbox-2': 1,
                    'checkbox-3': 1,
                    'checkbox-4': 1,
                    'checkbox-5': 1,
                    'checkbox-6': 1,
                    'checkbox-7': 1,
                    'checkbox-8': 1,
                    'checkbox-9': 1,
                    'checkbox-10': 1,
                    'checkbox-11': 8,
                    'checkbox-12': 8,
                },
                run : function( e, form_id ) {
                    if( _forminator_restrict_multiple_fields.form_ids.indexOf( form_id ) === -1 ){
                        return;
                    }
                    let _form = $( "#forminator-module-" + form_id );

                    _form.find('.wpmudev-option-limit').each(function(){
                        let _field = $(this),
                                checkbox_fields = _field.find( ":checkbox" );
                        if( checkbox_fields.length ){
                            checkbox_fields.on('change', function (e) {
                                let _parent = $(this).closest('.wpmudev-option-limit'),
                                        _parent_id = _parent.attr('id'),
                                        _selected = _parent.find(':checkbox:checked').length;
                                if( _parent_id in _forminator_restrict_multiple_fields.limit && _selected >= _forminator_restrict_multiple_fields.limit[ _parent_id ]){

                                    // save latest value.
                                    _field.data('latest_value', $(this).val() );
                                    // disable other options.
                                    _parent.find(':checkbox:not(:checked)').each(function(){
                                        $(this).prop('disabled', true).parent().addClass('wpmudev-disabled');
                                    });
                                }else{
                                    _parent.find(':checkbox:disabled').each(function(){
                                        $(this).prop('disabled', false).parent().removeClass('wpmudev-disabled');
                                    });

                                    _field.removeData('latest_value');
                                }
                            });
                        }

                        // auto remove previous value when riched the limit.
                        $(this).on('click', '.wpmudev-disabled', function(){
                            let _latest_value = _field.data('latest_value') ;
                            if( _latest_value ){
                                let _previous_opt = $(this).closest('.wpmudev-option-limit').find('input[value="'+ _latest_value +'"');
                                if( _previous_opt.length ){
                                    _previous_opt.trigger('click');
                                    $(this).removeClass('wpmudev-disabled').find('input:disabled').removeAttr('disabled');
                                }
                            }
                        })
                    });
                }
            }

            $(document).ready(function(){
                $.each(_forminator_restrict_multiple_fields.form_ids, function(i, _form_id){
                    _forminator_restrict_multiple_fields.run(this,_form_id);
                });
                $(document).on( 'response.success.load.forminator', _forminator_restrict_multiple_fields.run );
            });
        })(jQuery);

    </script>

    <?php
}, 999 );

但是，即使我选择的选项少于 8 个，复选框 11 和 12 也允许我继续。如何强制用户强制选择最后两个复选框的 8 个选项？一千个谢谢！

我还很缺乏经验，但我尝试了很多不同的解决方案，但无法弄清楚。

Answer 1

这是代码所在的位置：https://gist.github.com/wpmudev-sls/5be7b5f7eac4132e1539b850b8ab751c

这个问题也在 GitHub 上被问到（https://wordpress.org/support/topic/limiting-the-number-of-checkboxes-in-forminator/），并且答案（）3年前在在撰写本文时），目前尚不支持这一点，但可以：

要使上述代码正常工作，您必须首先确保将“wpmudev-option-limit”类名添加到“样式”选项卡下的复选框中：

您还需要编辑这部分代码：

            const _forminator_restrict_multiple_fields = {
                form_ids: [791, 9034],
                limit: {
                    'checkbox-2': 5,//[field-id]:[limit]
                    'select-1': 1
                },

通过将限制更改为您想要的限制并将表单 ID 更改为您的。