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

文本框无法获取只读

1 个答案: