如何在勾选复选框时使项目成为必填项

how to make items required when checkbox is ticked?

本文关键字：项目 复选框      更新时间：2023-09-26

我正在尝试设置一个文本框，如果勾选了复选框，则需要下拉列表和带有日期选择器的文本框。所以，如果没有勾选复选框，则不需要字段，但如果勾选了，则需要所有字段。

<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);
  }
});
相关文章：