включить checkbox только тогда, когда текстовое поле не пусто. Asp.net

Question

Мне нужно сделать видимым checkbox и текст рядом с ним, только если заполнен textbox. В противном случае он должен быть невидим.

<p>Telefon:<asp:TextBox ID="txtPhone" runat="server"></asp:TextBox></p> 
<asp:CheckBox ID="CheckBox2" runat="server" Visible="False" Text="bla bla"/> 

Это будет нормально либо позади кода, либо по javascript.

Answer 1

ответ Мейсона частично работает для меня, а это означает, что идентификаторы были статичными, и это может ударить как условия внутри JQuery. Тем не менее, мой HTML обрабатывался с помощью CheckBox2 с элементом <span></span>. Поэтому я должен был сделать это, чтобы он работал.

<p>Telefon:<asp:TextBox ID="txtPhone" ClientIdMode="static" runat="server"></asp:TextBox> 
<asp:CheckBox ID="CheckBox2" ClientIdMode="static" runat="server" Text="blabla" style="display: none;" /> 

$(function() { 
    $('#txtPhone').on('input propertychange paste', function() { 
     if ($('#txtPhone').val()) { 
       $("#CheckBox2").parent().show(); 
       } 
       else { 
        $("#CheckBox2").parent().hide(); 
       } 
      }); 
     }); 

Answer 2

Вы должны сделать это с помощью JavaScript. This question показывает, как определить, когда изменяется значение текстового поля. This question рассказывает нам, как определить, пусто ли текстовое поле или нет. This demo показывает нам, как скрыть и показать вещи с помощью jQuery.

Обратите внимание, что я сделал ClientIdMode="static" для элементов управления, чтобы избежать наличия разных идентификаторов на стороне клиента, чем на сервере. И вместо того, чтобы использовать свойство Visible на флажке, я использую CSS display: none. Visible="false" даже не отправил разметку для флажка клиенту, и нам нужна эта разметка, чтобы мы могли показать ее без обратной передачи.

<p>Telefon:<asp:TextBox ID="txtPhone" ClientIdMode="static" runat="server"></asp:TextBox></p> 
<asp:CheckBox ID="CheckBox2" ClientIdMode="static" runat="server" Text="bla bla" style="display: none" /> 

$(function() {  
    $('#txtPhone').on('input propertychange paste', function() { 
     if($('#txtPhone').val()){ 
      $("#CheckBox2").show(); 
     } 
     else{ 
      $("#CheckBox2").hide(); 
     } 
    }); 
});