2016-06-17 22 views
0

ラジオボタンの名前を 'each'関数でループしようとしています。各関数が機能していないので、ロジックを1回だけ適用しています。時間.. 私は選択ドロップダウンから値を選択し、ラジオボタンを有効にする必要があり、ユーザーがドロップダウンの選択を解除した場合、無効にする必要があります。jqueryのラジオボタンはそれぞれ機能しません

私の場合、 1回だけループしていて、それから終了しています。ドロップダウン選択に基づいて無効/有効にするには、ヘルプが必要です。

htmlコード:

<div class="uriDiv input-group"> 
    <select class="common authSelect form-control" name="authType" id="authType"> 
    <option value=""> 
     <spring:message code="newPolicy.selectAuthType"></spring:message> 
    </option> 
    <option value="DB">DB</option> 
    <option value="LDAP">LDAP</option> 
    </select> 
</div> 
<td> 
    <div class="auth-permission-rd"> 
    <div class="uriDiv radio radio-left"> 
     <label> 
     <input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User 
     </label> 
    </div> 
    <div class="uriDiv radio radio-input"> 
     <label> 
     <input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled"> 
     <input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" /> 
     </label> 
    </div> 
    </div> 

jqueryの:

$("#authType").change(function(){ 
    if($(this).val()){ 
     $("input:radio[name='authPermission']").each(function(){ 
      $("#authPermission").prop('disabled',false); 
       $("#authPermission").prop('checked',false); 

     }); 
    } 
    else{ 
     $("#authPermission").each(function(){ 
      $("#authPermission").prop('disabled',true); 
       $("#authPermission").prop('checked',false); 

     }); 
    } 
}); 
+1

同じ「id」属性を持つ要素を複数持つことはできませんし、同じ 'name'値を持つ複数のラジオボタンを有効にすることはできません。 –

+0

ooh..ok..o、唯一の可能性は、各ラジオボタンに別の名前/ IDを定義することです...? –

+0

IDはまったく必要なく、クラスやデータ属性を使用してください。 – skobaljic

答えて

0

あなたは同じIDを持つ複数の要素を持つことはできません。したがって、id属性を削除してclass属性に新しい値を設定してコードを変更し、jqueryクラスセレクタを使用してオブジェクトをフェッチします。

 <div class="uriDiv input-group"> 
    <select class="common authSelect form-control" name="authType" id="authType"> 
    <option value=""> 
     <spring:message code="newPolicy.selectAuthType"></spring:message> 
    </option> 
    <option value="DB">DB</option> 
    <option value="LDAP">LDAP</option> 
    </select> 
</div> 
<td> 
    <div class="auth-permission-rd"> 
    <div class="uriDiv radio radio-left"> 
     <label> 
     <input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User 
     </label> 
    </div> 
    <div class="uriDiv radio radio-input"> 
     <label> 
     <input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled"> 
     <input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" /> 
     </label> 
    </div> 
    </div> 

とjQueryコード:

$("#authType").change(function(){ 
    if($(this).val()){ 
     $("input:radio[name='authPermission']").each(function(elemId, elem){ 
      $(elem).prop('disabled',false); 
      $(elem).prop('checked',false); 

     }); 
    } 
    else{ 
     $(".authPermission").each(function(elemId, elem){ 
      $(elem).prop('disabled',true); 
      $(elem).prop('checked',false); 
     }); 
    } 
}); 

しかし、私たちはあなたのコードでは、より良い見てみる場合は、使用したい理由を、私は「それぞれ」を理解していません。あなたはそれなしで同じことを達成することができます:

// Following code : 
$(".authPermission").each(function(elemId, elem){ 
       $(elem).prop('disabled',true); 
       $(elem).prop('checked',false); 
      }); 
// Does the same thing as this one : 
$(".authPermission").prop('disabled', true).prop('checked', false); 
+0

yea、それはうまくいったScalpweb..thanks ...それは私が疑問を持っています...私はauthPermissionと同じ名前で両方を定義すると、どのjqueryが名前とクラスを区別するのでしょうか?pls explain authPermissionとしてクラスを追加する方法については、それが動作するように..? –

+0

jQueryは、セレクタに基づいて要素を検索しています。 クラスごとに要素を検索するには、 "。"セレクタ: $( "。YourClassNameHere"); idで要素を検索するには、 "#"セレクタを使用します。 $( "#YourIdHere"); 名前で検索するには、これを使用できます(遅くなります)。 $( "[name = YourNameHere]"); 詳細情報:https://api.jquery。jqueryの '$(" authPermission ")はjsの' getElementById( 'authPermission ')'の省略形であるためcom/category /セレクタ/ – Scalpweb

+0

です。** – Grisza

0

私はあなたのコードをリファクタリングしました。また、適切なラジオがクリックされたときに入力フィールドを有効にします。これはうまくいく:

function updateUI() { 

    var select = $("#authType"); 
    var value = select.val(); 

    var should_appear = (value.length == 0); 

    $("input:radio[name='authPermission']").attr('disabled',should_appear); 
} 

//binding... 

$("input:radio").on("click", function() { 
    var should_display_textbox = !($(this).val() === "groupUser"); 
    console.log(should_display_textbox); 
    $("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox); 
}); 

$("#authType").change(function(){ 
    updateUI(); 
}); 

$(document).ready(function() { 
    updateUI(); //update also when page load 
}); 
0

何かこれは多分?

$("#authType").change(function(){ 
    var disabled = !$(this).val() ? true : false; 
    $("input:radio[name='authPermission']").each(function(){ 
     $(this).prop('disabled', disabled); 
     $(this).prop('checked',false); 

    }); 
}); 
関連する問題