數據切換和數據目標沒有按要求工作

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>