Изменить CSS, если определенные пользовательские мета-блоки отмечены

Question

У меня есть собственные мета-блоки, которые отображают div inline-block, когда я отмечен, поэтому у меня есть код, который говорит, что если мета-бокс include_freq_flyer2 установлен, то он отображает содержимое в связанных пользовательских мета-боксах, если включены include_freq_flyer2 и freq_flyer3, он отображает оба и т. Д. freq_flyer6. Это работает нормально, но мне нужно иметь возможность изменять ширину div freq_flyer в зависимости от того, какие флажки установлены, поэтому, если установлены первые 3 поля, которые будут мета-полями freq_flyer2 и freq_flyer3, то измените ширину div freq_flyer на 33.3% и то же самое, если флажки 2,3,4 и 5 помечены как 20%, и если все шесть отмечены, то ширина 33,3%. Я не уверен, как это сделать, код:

    <?php if ($meta['include_frequentflyer']) { ?>
        <div class="frequent_flyer">
       <div class="freq_flyer" style="background-color:#2c3d55;">
               <div class="freq_flyer_copy">
             <h4 class="serif"><?php echo $meta['frequent_flyer_content_title1']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy1']; ?></p>
               </div></div><!-- freq_flyer --><?php if ($meta['include_freq_flyer2']) { ?><div class="freq_flyer" style="background-color:#85868b;"><div class="freq_flyer_copy"><h4 class="serif"><?php echo $meta['frequent_flyer_content_title2']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy2']; ?></p>
               </div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer2); ?><?php } ?><?php if ($meta['include_freq_flyer3']) { ?><div class="freq_flyer" style="background-color:#2c3d55;"><div class="freq_flyer_copy">
             <h4 class="serif"><?php echo $meta['frequent_flyer_content_title3']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy3']; ?></p></div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer3); ?><!-- --><?php } ?><?php if ($meta['include_freq_flyer4']) { ?><div class="freq_flyer" style="background-color:#85868b;"><div class="freq_flyer_copy">
             <h4 class="serif"><?php echo $meta['frequent_flyer_content_title4']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy4']; ?></p></div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer4); ?><?php } ?><?php if ($meta['include_freq_flyer5']) { ?><div class="freq_flyer" style="background-color:#2c3d55;"><div class="freq_flyer_copy"> <h4 class="serif"><?php echo $meta['frequent_flyer_content_title5']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy5']; ?></p>      
         </div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer5); ?><?php } ?><?php if ($meta['include_freq_flyer6']) { ?><div class="freq_flyer" style="background-color:#85868b;"><div class="freq_flyer_copy"> <h4 class="serif"><?php echo $meta['frequent_flyer_content_title6']; ?></h4><!--
            --><p><?php echo $meta['frequent_flyer_content_copy6']; ?></p>      
         </div></div><!-- freq_flyer --><?php echo wpautop($include_freq_flyer6); ?><?php } ?>

        </div><!-- frequent_flyer -->

<?php echo wpautop($include_frequentflyer); ?>
    <?php } ?>

Единственный подход, который я могу придумать, это ниже, но я не уверен, как это включить:

    <script>    
        $meta('include_freq_flyer2, include_freq_flyer3').on('change', function () {

        if ($meta('include_freq_flyer2').is(':checked') && $('include_freq_flyer3').is(':checked')) {                                          
        $meta('.freq_flyer').css('width', '33.3%');
       } else {
        $meta('.freq_flyer').css('width', '25%');
       }
      });
      </script>