データトグルとデータターゲットが希望通りに動作しない

Question

現在、私は次の問題に直面しているhtmlページで作業しています。

私の問題：

私のhtmlページには、以下のオプションのうち、加入プランを選択することができます：

1. 無料
2. 標準
3. プレミアム

ユーザーの要件に応じて、私は電子したいですスタンダードプランおよびプレミアムプランのファイルアップロードオプションのみを選択してください。データターゲットとデータトグルの組み合わせを使用することで、両方のプランに対してファイルアップロードオプションを表示しようとしましたが、ファイルアップロードオプションは標準プランの場合のみで動作します。私も経てい

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>