选中复选框后如何制作所需物品?

时间:2015-06-26 13:53:54

标签: javascript c# asp.net visual-studio

我正在尝试设置一个文本框,并且如果选中了复选框,则需要使用下拉列表和带有日期选择器的文本框。因此,如果未勾选复选框,则不需要这些字段,但如果勾选则需要所有字段。

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

尝试过customervalidator:

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

但是勾选复选框时,它不需要文本框。

2 个答案:

答案 0 :(得分:1)

I believe you want to use a custom validator.因此,如果chkHazTrained.Checked == false,或者如果ChkHazTrained.Checked == true且textbox / ddl有值,则textbox / ddl有效。

我想你可以使用RequiredFieldValidators让它工作,并在Checkbox的CheckedChanged事件中更新它们的.Enabled属性,但这需要你的复选框才能回发。

答案 1 :(得分:0)

复选框中的click事件是服务器端事件的引用,对于javascript,您需要客户端版本。为此,您可以在服务器端添加一个属性,其中包含onclick和要调用的函数。但我建议使用jquery并添加一个click事件。以下是将click事件添加到元素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);
  }

});