如何在勾选复选框时使项目成为必填项
本文关键字:项目 复选框 | 更新日期: 2023-09-27 18:00:00
我正在尝试设置一个文本框,如果勾选了复选框,则需要下拉列表和带有日期选择器的文本框。所以,如果没有勾选复选框,则不需要字段,但如果勾选了,则需要所有字段。
<table>
<tbody>
<tr>
<td class="Header">Haz Trained?</td>
<td></td>
<td>
<asp:CheckBox runat="server" ID="chkHazTrained" OnClick="updateValidator();"/>
</td>
</tr>
<tr>
<td class="Header">Haz License No</td>
<td></td>
<td>
<asp:TextBox runat="server" ID="txtHazLicenseNo"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvHazLicenseNo" ControlToValidate="txtHazLicenseNo" ErrorMessage="You must enter a License No." runat="server" />
</td>
</tr>
<tr>
<td class="Header">License Type</td>
<td></td>
<td>
<asp:DropDownList runat="server" ID="ddlHazLicenseType">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="Header">Expiry Date
</td>
<td></td>
<td>
<asp:TextBox runat="server" ID="txtHazLicenseExpiryDate" rel="datepicker" CssClass="dateonly"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
我试着创建一个javascript函数,但它不能正常工作。即使没有勾选复选框,它也会要求填写文本框。如果未勾选复选框,则不需要其他字段。那么我该如何解决这个问题呢?
function updateValidator() {
var enableValidator = !event.srcElement.status;
var rfvHazLicenseNo = document.getElementById('rfvHazLicenceNo');
ValidatorEnable(rfvHazLicenseNo, enableValidator);
}
尝试过的客户验证程序:
<asp:TextBox runat="server" ID="txtHazLicenseNo" Text=""></asp:TextBox>
<asp:CustomValidator id="CustomValidator2" runat="server"
ControlToValidate = "txtHazLicenseNo"
ErrorMessage = "Please enter"
ClientValidationFunction="validateHazLicence" >
</asp:CustomValidator>
function validateHazLicence(oSrc, args){
if(chkHazTrained.checked == true)
{
args.IsValid = (args.Value.length > 0);
}
}
但当复选框被勾选时,它并不会使文本框成为必需的。
我相信您想要使用自定义验证器。因此,如果chkHazTrained,则文本框/ddl将有效。Checked==false,或者如果ChkHazTrained。选中==true,并且文本框/ddl有一个值。
我想你可以使用RequiredFieldValidators并更新它们来让它工作。Checkbox的CheckedChanged事件的Enabled属性,但这需要您的复选框回发。
复选框中的单击事件是服务器端事件的引用,而javascript则需要客户端版本。为此,您可以使用onclick和要调用的函数在服务器端添加一个属性。但我建议使用jquery并添加一个点击事件。以下是将单击事件添加到元素的链接https://api.jquery.com/click/
在javascript函数中,您需要启用类似以下的验证器
ValidatorEnable(ValBano, true);
验证变量是否正在发送字符串,以及这是否会导致问题。另外,您需要在javascript中进行检查的是,框架不会更改复选框或其他元素的名称。
例如,使用此选项可以获得验证控件和/或复选框的正确名称。如果您没有使用不更改名称的配置,请始终将其用于服务器端控件。
var ValBano = document.getElementById('<%=vreqBanos.ClientID %>');
此外,我建议使用jquery来读取例如复选框中的值,这样更容易并且跨浏览器兼容。
这里有一些代码使用jquery来检查是否选中了复选框:
$('#chkAddEducacion3').click(function () {
if ($('#chkAddEducacion3').is(':checked')) {
''get the validator
var ValBano = document.getElementById('<%=vreqBanos.ClientID %>');
''enable the validtor
ValidatorEnable(ValBano, true);
}
else
{
''get the validator
var ValBano = document.getElementById('<%=vreqBanos.ClientID %>');
''disable the validtor
ValidatorEnable(ValBano, false);
}
});