CakePHP：根据复选框状态显示/隐藏表单控件答案

【问题标题】：CakePHP: show/hide form control based on checkbox statusCakePHP：根据复选框状态显示/隐藏表单控件
【发布时间】：2019-03-26 23:09:17
【问题描述】：

我在 cakephp 表单中有这 3 个控件：

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]);

如果未选中字段 recurring，我希望隐藏字段 recurring_months 和 recurring_start_date - true。

所以我尝试使用此 javascript 代码但无法正常工作。我该如何解决？

<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>

【问题讨论】：

查看为您的字段生成的 HTML 以确认您的 ID 正确。但是，您可能希望在 DOM 树的更远处隐藏和显示某些内容，以便标签也消失？
@GregSchmidt 好的，我看到recurring_months id 是recurring-months，所以现在它可以工作了。但是 recurring_start_date 没有 id 只有名称 recurring_start_date[year], recurring_start_date[month], recurring_start_date[day] 。所以我尝试像这样手动设置 id：echo $this->Form->control('recurring_start_date', ['id' => 'recurring-start-date', 'empty' => true]); 但同样没有 id 只有名称。所以我不能隐藏日期字段...

标签： javascript jquery cakephp visibility

【解决方案1】：

这样的事情怎么样，将输入包装在 div 中并将其隐藏而不是单独隐藏字段：

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>

【讨论】：