Question

我目前正在处理一个表单，其中一个段有2个元素的下拉列表选项，旁边是与该下拉列表相关联的两个单选按钮。其中一个单选按钮是正常的（非输入文本框）一个，另一个单选按钮用于自定义输入文本框。用例是，用户首先在下拉列表中选择一个元素，并根据选择，如果用户点击没有输入文本框的第一个单选按钮，则应根据下拉选择分配此单选按钮的值。

下面是我的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="DBUser">DBUser</option>
    <option value="LDAPUser">LDAPUser</option>
  </select>
</div>

<div class="auth-permission-rd">
  <div class="uriDiv radio radio-left">
    <label>
      <input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission">Any User
    </label>
  </div>
  <div class="uriDiv radio radio-input">
    <label>
      <input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission">
      <input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
    </label>
  </div>
</div>

我应该有一个jquery代码，将值分配给单选按钮..

因此，如果用户从下拉列表中选择“DBUser”并且如果他选择“AnyUser”单选按钮，则jquery功能需要为单选按钮分配一个可能为“AnyDBUserValue”的值。

如果用户从下拉列表中选择LDAPUser并且如果他选择“AnyUser”单选按钮，则jquery功能需要为此分配一个值，该值可能是“AnyLDAPUserValue”到单选按钮..

如果用户想通过选择其他具有输入文本框的单选按钮来输入自定义值，那么我们需要丢弃这些先前的值并获取用户输入的自定义值。

我是JQUery的新手，因此需要帮助编写此功能的jquery代码...

感谢帮助。谢谢。

Answer 1

First you will perform drop down event like this...

$("#authType").change(function(){       
        $("#authPermissionValue").val($("[type = radio]").val().split("U")[0].toUpperCase() + $("#authType").val()) 
    })

or also like this..

$("#authType").change(function(){       
        $("#authPermissionValue").val("ANY" + $("#authType").val()) 
    })

and after this you can perform radio button even like this...

$(".groupuser").on( "click", function(){        
        $("#authPermissionValue").removeAttr("disabled");
        $("#authPermissionValue").val("");
    });

That solution is totally dynamic of your requirements.
no need to add extra hard code for conditions

Answer 2

下面的代码可以让您了解如何开始

$("#authType").change(function(){


})

$('input[name="authPermission"]').click(function(){
   if ( $("#authType").val()=='DBUser' && $(this).val() =='anyUser'){
       $(this).val('AnyDBUser');
   }
   if ( $("#authType").val()=='LDAPUser' && $(this).val() =='anyUser'){
       $(this).val('AnyLDAPUser');
   }
})

根据下拉选择将值分配给单选按钮

2 个答案: