Textbox not readonly

Question

我有一个文本框，点击后，它允许您从日历控件中选择日期。如果日期被删除，它应该取消选中文本框旁边的复选框。

使用下面的代码，我能够实现除了使文本框只读以外的所有内容，以便用户无法输入任何内容。此外，一旦文本被选中，复选框被选中，但是当文本被删除时，复选框不会被取消选中。

任何人都可以提出什么需要我可能会做错在这里？

<asp:CalendarExtender ID="CalForDate" runat="server" TargetControlID="txtDate" Format="MM/dd/yyyy" PopupPosition="BottomLeft" DefaultView="Days"></asp:CalendarExtender>          
<asp:TextBox runat="server" ID="txtDate" AutoPostBack="true" EnableViewState = "false" onKeyPress="javascript:return ChkCheckBox()" OnTextChanged="txtDate_OnTextChanged"></asp:TextBox> 

的JavaScript代码：

function ChkCheckBox() { 
       var txtDate = document.getElementById('ctl00_ctl00_cphMSTMainPage_cphMSTLDAHomePage_txtDate').value;  
       if (txtDate.length == 9) { 
        document.getElementById('ctl00_ctl00_cphMSTMainPage_cphMSTLDAHomePage_chkDate').checked = true; 
       } 
       else 
       { 
        document.getElementById('ctl00_ctl00_cphMSTMainPage_cphMSTLDAHomePage_chkDate').checked = false; 
       } 

在页面加载我已经加入：

 if (!IsPostBack){  
txtDate.Attributes.Add("readonly", "readonly");} 

而且在文本修改：

public void txtDate_OnTextChanged(object o, EventArgs e){   
if (!(string.IsNullOrEmpty(txtDate.Text))) 
{           
    chkDate.Visible = true; 
    chkDate.Checked = true; 
} 
else 
{ 
    chkDate.Visible = true; 
    chkDate.Checked = false; 
} } 

Answer 1

您可以轻松地做到这一点使用jQuery 。我向您发送示例代码。如有需要，请不要犹豫寻求进一步的协助。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#txtDate').on('change', function() { 
      //console.log('Tested'); 
      if ($(this).val().toString().trim() != '') { 
       $('[Id*=ckTest]').attr('checked', 'checked'); 
      } 
      else { 
       $('[Id*=ckTest]').removeAttr('checked'); 
      } 
     }); 

     $('#btnClear').click(function() { 
      $('#txtDate').val(''); 
      $('#txtDate').trigger('change'); 
     }); 
    }); 
</script> 

代码文件如下。

<form id="form1" runat="server"> 
    <div> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
     <asp:TextBox ID="txtDate" runat="server" ReadOnly="true" ClientIDMode="Static"></asp:TextBox> 
     <asp:CheckBox ID="ckTest" runat="server" /> 
     <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" /> 
     <button id="btnClear">Clear</button> 
    </div> 
</form> 

只需添加了jQuery项目中，我 jQuery的2.1.4.min.js