Question

我试图按名称循环显示单选按钮，每个＆＃39; function..the每个函数都不起作用，它只应用逻辑一次，并且下次没有循环。我的用例是，当用户从选择下拉列表中选择值时，需要启用两个单选按钮，如果用户取消选择下拉列表 - 需要禁用后退..

在我的情况下，每个函数只循环一次，之后就会退出它。需要帮助根据下拉选择来确定禁用/启用..

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

但是，如果我们更好地查看您的代码，我不明白您为什么要使用＆＃34;每个＆＃34;。没有它你可以实现同样的目标：

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

     });
 });

jquery单选按钮每个都不工作

3 个答案: