勾選復選框時如何使項目成為必需？

Question

如果勾選了復選框，我正在嘗試將文本框、下拉列表和帶有日期選擇器的文本框設置為必需。 因此，如果未勾選復選框，則不需要這些字段，但如果勾選了所有字段，則所有字段都是必需的。

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

但是當復選框被勾選時，它不需要文本框。

Answer 1

我相信您想使用自定義驗證器。 因此，如果 chkHazTrained.Checked == false，或者如果 ChkHazTrained.Checked == true 並且 textbox/ddl 具有值，則文本框/ddl 將有效。

我想你可以使用 RequiredFieldValidators 並更新它們在 Checkbox 的 CheckedChanged 事件上的 .Enabled 屬性來讓它工作，但這需要你的復選框回發。

Answer 2

復選框中的單擊事件是服務器端事件的參考，對於 javascript，您需要客戶端版本。 為此，您可以使用 onclick 和要調用的函數在服務器端添加一個屬性。 但我建議使用 jquery 並添加點擊事件。 這是向元素添加點擊事件的鏈接https://api.jquery.com/click/

在 javascript 函數中，您需要像這樣啟用驗證器

 ValidatorEnable(ValBano, true);

驗證您的變量是否正在發送字符串以及這是否會導致問題。 此外，您還需要檢查您的 javascript 框架是否未更改復選框或其他元素的名稱。

例如，使用 this 來獲取驗證控件和/或復選框的正確名稱。 如果您不使用不更改名稱的配置，請始終將其用於服務器端控件。

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

});