文本框没有变得只读

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