文本框未变为只读

本文关键字：只读 文本 | 更新日期: 2023-09-27 18:21:10

我有一个文本框，点击后，可以从日历控件中选择日期。如果删除了日期，则应取消选中文本框旁边的复选框。

通过下面的代码，我能够实现除了使文本框只读之外的所有功能，这样用户就不能键入任何内容。此外，一旦选中文本，复选框就会被选中，但当删除文本时，复选框不会被取消选中。

有人能建议我在这里可能做错了什么吗？

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

文本框未变为只读

使用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

相关文章：