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