数据切换和数据目标没有按要求工作

Question

我目前正在一个HTML页面，我面临以下问题。

我的问题：

我的HTML页面允许用户选择订阅计划从以下选项：

1. 免费
2. 标准
3. 高级

根据用户要求，我想e只有标准和高级计划才能使用文件上载选项。通过使用数据目标和数据切换的组合，我已尝试显示两个计划的文件上载选项。但文件上载选项仅适用于标准计划的。

我的研究：

我已经通过堆栈溢出以下重复的问题了：

Data-toggle and Data-target are not working as desired

Data-toggle and data-target are not working

data-toggle and data-target not working in bootstrap

我也通过了弗洛翼网站：

https://www.codeschool.com/discuss/t/bootstrap-behaviour-added-via-data-toggle-not-working/11339

http://www.w3schools.com/Bootstrap/bootstrap_ref_js_collapse.asp

不过，我还没有找到一个解决我的问题：

任何帮助将不胜感激。

我的代码：部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12 row"> 
 
    <div class="form-group col-md-12"> 
 
    <label name ="lblfree" class="full_width"><input value="" type="radio" name="plan"> Free (15 Days Trial)</label> 
 
    <label name= "lblstandard" data-toggle= "collapse" data-target= "#demo" class="full_width"><input value="" type="radio" name="plan"> Standard</label> 
 
    <label name= "lblpremium" data-toggle= "collapse" data-target= "#demo" class="full_width"><input value="" type="radio" name="plan"> Premium</label> 
 
    </div> 
 
    <div class="form-group col-md-12"> 
 
    <div id="demo" class="collapse-in"> 
 
     <label for="exampleInputPassword1">Upload Banner </label><br> 
 
     <input name="FileUpload" id="FileUpload-id" onchange="ZFLive.addFileUploadFields('FileUpload')" type="file"> 
 
     <i>(21.For Standard Plan Banner Resolution is n*n 2.For Premium Plan Banner Resolution is n*n)</i> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

正如我所说，我认为你需要编写一些代码。

所以逻辑是检查哪个复选框是:checked，获取值并检查是否需要slideUp或slideDown。

var checkboxes = $('[name="plan"]').change(function() { 
 
    var val = checkboxes.filter(':checked').val(); 
 
    var demo = $('#demo'); 
 
    if (val != 'free') { 
 
    demo.slideDown(); 
 
    } 
 
    else { 
 
    demo.slideUp(); 
 
    } 
 
});

#demo { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12 row"> 
 
    <div class="form-group col-md-12"> 
 
    <label name ="lblfree" class="full_width"><input value="free" type="radio" name="plan"> Free (15 Days Trial)</label> 
 
    <label name= "lblstandard" class="full_width"><input value="stardant" type="radio" name="plan"> Standard</label> 
 
    <label name= "lblpremium" class="full_width"><input value="premium" type="radio" name="plan"> Premium</label> 
 
    </div> 
 
    <div class="form-group col-md-12"> 
 
    <div id="demo"> 
 
     <label for="exampleInputPassword1">Upload Banner </label><br> 
 
     <input name="FileUpload" id="FileUpload-id" onchange="ZFLive.addFileUploadFields('FileUpload')" type="file"> 
 
     <i>(21.For Standard Plan Banner Resolution is n*n 2.For Premium Plan Banner Resolution is n*n)</i> 
 
    </div> 
 
    </div> 
 
</div>