非表示フィールドでのJavaScript条件の設定

Question

2つのフィールド（ソーシャルネットワークとユーザーソーシャルネットワークの選択）がjsで調整されているので、ユーザーが「その他」を選択すると新しいフィールドが表示され、選択する他のフィールドを追加するボタンがあります別のソーシャルネットワーク、すべてが完璧に動作しますが、オプション「その他」の2番目の条件を働かせることはできません 私はあなたの助けに感謝します。

function otherps() { 
 
    if ($("#platform_social").val() !== '') { 
 
    $("#social_user").prop('disabled', false); 
 
    $("#social_user").prop('required', true); 
 
    } else { 
 
    $("#social_user").prop('disabled', true); 
 
    $("#social_user").prop('required', false); 
 
    } 
 
    if ($("#platform_social").val() == "Other") { 
 
    $("#othersocial").css("display", "block"); 
 
    $("#otherplatform").prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $("#otherplatform").val(""); 
 
    $("#otherplatform").prop('required', false); 
 
    $("#othersocial").css("display", "none"); 
 
    } 
 
} 
 

 
//more social 
 
function add_social() { 
 
    var crd = $("#socialadded").val(); 
 
    var newblock = '<br><div class="headline">Other Social Media </div>'; 
 
    newblock += '<div class="fullrow" id="alremove' + crd + '">'; 
 
    newblock += '<div class="leftcol">'; 
 
    newblock += 'Provider/Platform:'; 
 
    newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '">'; 
 
    newblock += '<option value="" selected="selected">&nbsp;</option>'; 
 
    newblock += '<option value="ASKfm">ASKfm</option>'; 
 
    newblock += '<option value="Facebook">Facebook</option>'; 
 
    newblock += '<option value="Flickr">Flickr</option>'; 
 
    newblock += '<option value="GitHub">GitHub</option>'; 
 
    newblock += '<option value="Google">Google+</option>'; 
 
    newblock += '<option value="Instagram">Instagram</option>'; 
 
    newblock += '<option value="JustPaste">JustPaste.it</option>'; 
 
    newblock += '<option value="LinkedIn">LinkedIn</option>'; 
 
    newblock += '<option value="Tumblr">Tumblr</option>'; 
 
    newblock += '<option value="Twitter">Twitter</option>'; 
 
    newblock += '<option value="Vine">Vine</option>'; 
 
    newblock += '<option value="VKontakte">VKontakte (VK)</option>'; 
 
    newblock += '<option value="YouTube">YouTube</option>'; 
 
    newblock += '<option value="Other">Other</option>'; 
 
    newblock += '</select>'; 
 
    newblock += '<div id="othersocial' + crd + '" style="display:none;">'; 
 
    newblock += '<br>'; 
 
    newblock += '<div>Other Platform/Provider *</div>'; 
 
    newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 
    newblock += '<br>'; 
 
    newblock += '<div class="rightcol">'; 
 
    newblock += 'Social Media Identifier:'; 
 
    newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 

 

 
    $("#socialextra").append(newblock); 
 
    var whichplatform_social = "#platform_social" + crd; 
 
    var whichsocial_usere = "#social_user" + crd; 
 
    var whichotherplatform = "#otherplatform" + crd; 
 
    var whichothersocial = "#othersocial" + crd; 
 
    $(whichplatform_social).prop('required', true); 
 
    $(whichsocial_user).prop('required', true); 
 
    $(whichotherplatform).prop('required', true); 
 
    $(whichothersocial).css('display', 'block'); 
 
    if ($whichotherplatform !== '') { 
 
    $whichsocial_usere.prop('disabled', false); 
 
    $whichsocial_usere.prop('required', true); 
 
    } else { 
 
    $whichsocial_usere.prop('disabled', true); 
 
    $whichsocial_usere.prop('required', false); 
 
    } 
 
    if (whichotherplatform == "Other") { 
 
    $whichothersocial.css("display", "block"); 
 
    $whichotherplatform.prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $whichotherplatform.val(""); 
 
    $whichotherplatform.prop('required', false); 
 
    $whichothersocial.css("display", "none"); 
 
    } 
 
    crd++; 
 
    $("#socialadded").val(crd); 
 
}

<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <div>Provider/Platform</div> 
 
    <select name="platform_social" id="platform_social" onchange="otherps();"> 
 
    <option value="" selected="selected">&nbsp;</option> 
 
\t <option value="ASKfm">ASKfm</option> 
 
\t <option value="Facebook">Facebook</option> 
 
\t <option value="Flickr">Flickr</option> 
 
\t <option value="GitHub">GitHub</option> 
 
\t <option value="Google">Google+</option> 
 
\t <option value="Instagram">Instagram</option> 
 
\t <option value="JustPaste">JustPaste.it</option> 
 
\t <option value="LinkedIn">LinkedIn</option> 
 
\t <option value="Tumblr">Tumblr</option> 
 
\t <option value="Twitter">Twitter</option> 
 
\t <option value="Vine">Vine</option> 
 
\t <option value="VKontakte">VKontakte (VK)</option> 
 
\t <option value="YouTube">YouTube</option> 
 
\t <option value="Other">Other</option> 
 
    </select> 
 
    <div id="othersocial" style="display:none;"> 
 
     <br> 
 
     <div>Other Platform </div> 
 
     <input type="text" name="otherplatform" id="otherplatform" /><br> 
 
    </div> 
 
    </div> 
 

 
    <div class="rightcol"> 
 
    <div>Social Media Identifier</div> 
 
    <input type="text" id="social_user" name="social_user" disabled /> 
 
    </div> 
 
</div> 
 

 
<div id="socialextra"></div> 
 

 
<input type="hidden" name="socialadded" id="socialadded" value="0" /> 
 
<br> 
 
<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <span class="addtravel"><a onclick="add_social()" 
 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span> 
 
    </div> 
 
</div>

私は余分なソーシャルネットワークのための条件を追加しようとしたまですべてが完璧に動作します。

どうもありがとう

Answer 1

チェックスニペット

function otherps(val) { 
 
    if ($("#platform_social"+ val).val() !== '') { 
 
    $("#social_user"+ val).prop('disabled', false); 
 
    $("#social_user"+ val).prop('required', true); 
 
    } else { 
 
    $("#social_user" + val).prop('disabled', true); 
 
    $("#social_user" + val).prop('required', false); 
 
    } 
 
    if ($("#platform_social" + val).val() == "Other") { 
 
    $("#othersocial" + val).css("display", "block"); 
 
    $("#otherplatform" + val).prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $("#otherplatform" + val).val(""); 
 
    $("#otherplatform" + val).prop('required', false); 
 
    $("#othersocial" + val).css("display", "none"); 
 
    } 
 
} 
 

 
//more social 
 
function add_social() { 
 
    var crd = $("#socialadded").val(); 
 
    var newblock = '<br><div class="headline">Other Social Media </div>'; 
 
    newblock += '<div class="fullrow" id="alremove' + crd + '">'; 
 
    newblock += '<div class="leftcol">'; 
 
    newblock += 'Provider/Platform:'; 
 
    newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '" onchange="otherps("+crd+")>'; 
 
    newblock += '<option value="" selected="selected">&nbsp;</option>'; 
 
    newblock += '<option value="ASKfm">ASKfm</option>'; 
 
    newblock += '<option value="Facebook">Facebook</option>'; 
 
    newblock += '<option value="Flickr">Flickr</option>'; 
 
    newblock += '<option value="GitHub">GitHub</option>'; 
 
    newblock += '<option value="Google">Google+</option>'; 
 
    newblock += '<option value="Instagram">Instagram</option>'; 
 
    newblock += '<option value="JustPaste">JustPaste.it</option>'; 
 
    newblock += '<option value="LinkedIn">LinkedIn</option>'; 
 
    newblock += '<option value="Tumblr">Tumblr</option>'; 
 
    newblock += '<option value="Twitter">Twitter</option>'; 
 
    newblock += '<option value="Vine">Vine</option>'; 
 
    newblock += '<option value="VKontakte">VKontakte (VK)</option>'; 
 
    newblock += '<option value="YouTube">YouTube</option>'; 
 
    newblock += '<option value="Other">Other</option>'; 
 
    newblock += '</select>'; 
 
    newblock += '<div id="othersocial' + crd + '" style="display:none;">'; 
 
    newblock += '<br>'; 
 
    newblock += '<div>Other Platform/Provider *</div>'; 
 
    newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 
    newblock += '<br>'; 
 
    newblock += '<div class="rightcol">'; 
 
    newblock += 'Social Media Identifier:'; 
 
    newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />'; 
 
    newblock += '</div>'; 
 
    newblock += '</div>'; 
 

 

 
    $("#socialextra").append(newblock); 
 
    var whichplatform_social = "#platform_social" + crd; 
 
    var whichsocial_usere = "#social_user" + crd; 
 
    var whichotherplatform = "#otherplatform" + crd; 
 
    var whichothersocial = "#othersocial" + crd; 
 
    $(whichplatform_social).prop('required', true); 
 
    $(whichsocial_user).prop('required', true); 
 
    $(whichotherplatform).prop('required', true); 
 
    $(whichothersocial).css('display', 'block'); 
 
    if ($whichotherplatform !== '') { 
 
    $whichsocial_usere.prop('disabled', false); 
 
    $whichsocial_usere.prop('required', true); 
 
    } else { 
 
    $whichsocial_usere.prop('disabled', true); 
 
    $whichsocial_usere.prop('required', false); 
 
    } 
 
    if (whichotherplatform == "Other") { 
 
    $whichothersocial.css("display", "block"); 
 
    $whichotherplatform.prop('required', true); 
 
    //$("input").prop('required',true); 
 
    } else { 
 
    $whichotherplatform.val(""); 
 
    $whichotherplatform.prop('required', false); 
 
    $whichothersocial.css("display", "none"); 
 
    } 
 
    crd++; 
 
    $("#socialadded").val(crd); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    
 
    <div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <div>Provider/Platform</div> 
 
    <select name="platform_social" id="platform_social" onchange="otherps('');"> 
 
    <option value="" selected="selected">&nbsp;</option> 
 
\t <option value="ASKfm">ASKfm</option> 
 
\t <option value="Facebook">Facebook</option> 
 
\t <option value="Flickr">Flickr</option> 
 
\t <option value="GitHub">GitHub</option> 
 
\t <option value="Google">Google+</option> 
 
\t <option value="Instagram">Instagram</option> 
 
\t <option value="JustPaste">JustPaste.it</option> 
 
\t <option value="LinkedIn">LinkedIn</option> 
 
\t <option value="Tumblr">Tumblr</option> 
 
\t <option value="Twitter">Twitter</option> 
 
\t <option value="Vine">Vine</option> 
 
\t <option value="VKontakte">VKontakte (VK)</option> 
 
\t <option value="YouTube">YouTube</option> 
 
\t <option value="Other">Other</option> 
 
    </select> 
 
    <div id="othersocial" style="display:none;"> 
 
     <br> 
 
     <div>Other Platform </div> 
 
     <input type="text" name="otherplatform" id="otherplatform" /><br> 
 
    </div> 
 
    </div> 
 

 
    <div class="rightcol"> 
 
    <div>Social Media Identifier</div> 
 
    <input type="text" id="social_user" name="social_user" disabled /> 
 
    </div> 
 
</div> 
 

 
<div id="socialextra"></div> 
 

 
<input type="hidden" name="socialadded" id="socialadded" value="0" /> 
 
<br> 
 
<div class="fullrow"> 
 
    <div class="leftcol"> 
 
    <span class="addtravel"><a onclick="add_social()" 
 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span> 
 
    </div> 
 
</div> 
 
    
 
    </body> 
 

 
</html>

ともここでの作業plunkerがあります。 Plunker

ソリューション 私は「otherps」関数にパラメータを追加して、ダイナミックHTMLを生成するときの機能にCRDを解析。