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

    }); 
});