数据切换和数据目标未按预期工作

Question

我目前正在处理一个遇到以下问题的 html 页面。

我的问题：

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

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

根据用户要求，我希望仅为标准和高级计划启用文件上传选项。通过结合使用数据目标和数据切换，我尝试为这两个计划显示文件上传选项。但文件上传选项仅适用于标准计划。

我的研究：

我在 Stack Overflow 上经历了以下重复的问题：

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>