[FIXED] CakePHP: show/hide form control based on checkbox status

Issue

I have these 3 controls in a cakephp form:

echo $this->Form->control('recurring', ['empty' => true]);
echo $this->Form->control('recurring_months', ['options' => $months, 'empty' => true]);
echo $this->Form->control('recurring_start_date', ['empty' => true]);

I want the fields recurring_months and recurring_start_date to be hidden if the field recurring is not checked - true.

So I tried with this javascript code but is not working. How can I fix it?

<script>
    //hide recurring options if its not recurring
    $(document).ready(function() {  
        $('#recurring').on('change', function(e){ 
            if($(this).is(':checked')) { 
                $('#recurring_months').show();
                $('#recurring_start_date').show();
            }
            else{ 
                $('#recurring_months').hide();
                $('#recurring_start_date').hide();
            }
        });
    });
</script>

Solution

How about something like this, wrapping the inputs in a div and hiding it instead of hiding the fields individually:

echo $this->Form->control('recurring', ['empty' => true]);
echo $this->Html->tag('div',
    $this->Form->control('recurring_months', ['options' => $months, 'empty' => true]) .
    $this->Form->control('recurring_start_date', ['empty' => true]),
    ['id' => 'recurring_fields']
);

<script>
    //hide recurring options if its not recurring
    $(document).ready(function() {  
        $('#recurring').on('change', function(e){ 
            if($(this).is(':checked')) { 
                $('#recurring_fields').show();
            }
            else{ 
                $('#recurring_fields').hide();
            }
        });
    });
</script>

Answered By - Greg Schmidt