jqueryのラジオボタンはそれぞれ機能しません

Question

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

私の場合、 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); 

     }); 
    } 
}); 

Answer 1

あなたは同じ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); 

Answer 2

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

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 
}); 

Answer 3

何かこれは多分？

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

    }); 
});