kota srinu kota srinu - 5 months ago 25
Javascript Question

jquery radio button each -not working

i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..

Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..

html code:-

<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

You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.

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

And jQuery code :

 $("#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);
         });
     }  
});

But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :

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