背景:发起活动时,有些字段不是每个活动都需要配置的,所以需要根据需要来进行配置
效果
方案
html代码
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('分组开关')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-groupSwitch" name="row[groupSwitch]" type="hidden" value="{$row.groupSwitch}">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-groupSwitch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success {eq name="$row.groupSwitch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>
</div>
</div>
<div class="form-group" id="group" {eq name="$row.groupSwitch" value="0"}style="display:none;"{/eq}>
<label class="control-label col-xs-12 col-sm-2">{:__('分组')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-group" class="form-control" name="row[group]" type="number" value="{$row.group|htmlentities}">
</div>
</div>
根据 $row.groupSwitch 的值来判断当前默认的开关状态和控制是否显示对应的字段
需要注意的是开关的样式是通过class:fa-flip-horizontal text-gray来决定的
然后通过change事件来修改显示隐藏
$(document).on("change", "#c-groupSwitch", function(){
$("#group").toggle($("#c-groupSwitch").val() > 0);
});