使文本框需要根据下拉列表的值

本文关键字:下拉列表 文本 | 更新日期: 2023-09-27 18:14:10

我有一个下拉列表显示员工级别(例如经理、主管、成员等),还有一个文本框显示经理/主管的姓名。默认情况下,文本框是不需要的,所以它可以是空的。

但是,如果下拉列表值是"Member",那么我需要使文本框为required,因此不允许空值。

我已经为文本框放置了requiredfieldvalidator,但我不知道如何根据下拉列表中的值禁用/启用它。

<ASP:DROPDOWNLIST id="drpLstEmRank" tabIndex="2" runat="server" WIDTH="321"></ASP:DROPDOWNLIST>
<asp:RequiredFieldValidator ID="valDrpLstEmRank" runat="server" ControlToValidate="drpLstEmRank"
 Display="Dynamic" EnableClientScript="False" ErrorMessage="RequiredFieldValidator"
 Font-Italic="True" Font-Names="Verdana" Font-Size="8pt" InitialValue="(Select Rank)">Please select a rank</asp:RequiredFieldValidator></TD>
<asp:RequiredFieldValidator ID="valTbHeadName" runat="server" ControlToValidate="tbHeadName"
 Display="Dynamic" EnableClientScript="False" ErrorMessage="RequiredFieldValidator"
 Font-Italic="True" Font-Names="Verdana" Font-Size="8pt">Please input a head's name</asp:RequiredFieldValidator>
<ASP:TEXTBOX id="tbHeadName" runat="server" WIDTH="415" HEIGHT="26" MaxLength="50"></ASP:TEXTBOX>

使文本框需要根据下拉列表的值

您可以在Page_Load事件中禁用/启用服务器端代码中的验证器,如下所示。

protected void Page_Load(object sender, EventArgs e)
{
     valTbHeadName.Enabled = Request[drpLstEmRank.UniqueID] == "Member" ? true : false;
}

但不要忘记将AutoPostBack="true"属性添加到员工排名的下拉列表中。

客户端解决方案

$("document").ready(function(){
    $("drpLstEmRank").change(function(){
      if(this.val() == "Member"){
       EnableValidator("#valTbHeadName");
      }
    else{
       DisableValidator("#valTbHeadName");
      }
    });
});
//Method to disable the validator
function DisableValidator(validatorId) {
    var validator = $(validatorId);
    ValidatorEnable(validator[0], false);
}
//Method to enable the validator
function EnableValidator(validatorId) {
    var validator = $(validatorId);
    ValidatorEnable(validator[0], true);
    validator.hide();   //hides the error message
}