asp : asp : TextBox 특정 asp : CheckBoxList ListItem 검사 됨

Question

CheckBoxList의 특정 확인란이 선택되어있을 때 텍스트 상자를 채우지 않아도되는 예제가 없습니다. 독립 실행 형 CheckBox의 사례를 많이 볼 수 있습니다. CheckBoxList은 독특한 동물이며 필수 검사기가 내장되어 있지 않음을 알고 있습니다.

사용자가 확인란 목록에서 "기타"확인란을 선택하면 관련 텍스트 상자를 완성해야합니다. 확인란을 선택하여 텍스트 상자를 표시하거나 숨기는 것도 좋습니다.

Answer 1

그 밖의 모든 것이 실패하면 을 만듭니다. 이를 통해 요소 또는 여러 요소가 유효한지 여부에 대한 자체 규칙을 작성할 수 있습니다. 그러나이 작업을 위해 CheckBoxList에 checkBoxListValidator 클래스를 추가하여 jQuery로 찾을 수 있습니다. 보너스로

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

코드

는 other 체크 박스를 기반으로 텍스트 상자를 표시하고 숨 깁니다.

$('.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>