Erfordern Asp: TextBox, wenn bestimmte asp: CheckBoxList ListItem überprüfte

Question

Ich finde keine Beispiele für die Anforderung eines Textfelds ausgefüllt werden, wenn ein bestimmtes Kontrollkästchen in einem CheckBoxList überprüft wird. Ich finde viele Beispiele für eigenständige CheckBoxes. Ich verstehe die CheckBoxList ist ein einzigartiges Tier und hat keinen eingebauten erforderlichen Validator.

Ich brauche den Benutzer, um eine verwandte Textbox zu vervollständigen, wenn sie das Feld "Andere" in einer Liste von Kontrollkästchen aktivieren. Es wäre nett, die Textbox basierend auf dieser Box auch ein-/auszublenden.

Answer 1

Wenn alles andere fehlschlägt, erstellen Sie eine CustomValidator. Damit können Sie Ihre eigenen Regeln schreiben, wenn ein Element oder mehrere Elemente gültig sind oder nicht. Damit dies jedoch funktioniert, habe ich die CheckBoxList um die checkBoxListValidator Klasse erweitert, um sie mit jQuery zu finden.

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkBoxListValidator"> 
    <asp:ListItem Text="Option A" Value="1"></asp:ListItem> 
    <asp:ListItem Text="Option B" Value="2"></asp:ListItem> 
    <asp:ListItem Text="Option C" Value="3"></asp:ListItem> 
    <asp:ListItem Text="Other" Value="-1"></asp:ListItem> 
</asp:CheckBoxList> 

<asp:TextBox ID="TextBox1" runat="server" Style="display: none"></asp:TextBox> 

<asp:CustomValidator ID="CustomValidator1" runat="server" Text="Please fill out the TextBox" ClientValidationFunction="requiredFieldIfOther"></asp:CustomValidator> 

<script type="text/javascript"> 
    function requiredFieldIfOther(sender, element) { 
     var isValid = true; 
     var textBoxToValidate = $("#<%= TextBox1.ClientID%>"); 
     $('.checkBoxListValidator input[type="checkbox"]').each(function() { 
      if ($(this).val() == "-1" && $(this).prop("checked") == true && textBoxToValidate.val() == "") { 
       isValid = false; 
      } 
     }); 
     element.IsValid = isValid; 
    } 

Als Bonus der Code die Textbox auf der Grundlage der other Checkbox ein- und ausblenden.

$('.checkBoxListValidator input[type="checkbox"]').change(function() { 
     var textBoxToValidate = $("#<%= TextBox1.ClientID%>"); 
     if ($(this).val() == "-1" && $(this).prop("checked") == true) { 
      textBoxToValidate.prop("style", "display:block"); 
     } else { 
      textBoxToValidate.prop("style", "display:none"); 
     } 
    }); 
</script>