jquery 라디오 버튼이 각각 작동하지 않음

Question

'각'함수를 사용하여 라디오 버튼을 이름별로 반복하려고합니다. 각 기능이 작동하지 않고 로직을 한 번만 적용하고 다음 번에는 루핑하지 않습니다. 시간 .. 사용자가 선택 드롭 다운에서 값을 선택하면 라디오 버튼을 모두 활성화해야하고 사용자가 드롭 다운을 선택 취소하면 다시 사용할 수 없도록 설정해야합니다.

내 경우에는 각 기능 한 번만 반복 한 후 루프를 종료하고 있습니다. 드롭 다운 선택에 따라 사용 중지/사용 가능하게 설정하는 데 도움이 필요합니다.

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

    }); 
});