[RESOLVED]Javascript to disable the check box

I have 2 Textboxes to enter the dates and a Checkbox next to it. Dates are entered through calender control in JS. If the entered dates are greater than the present date,the checkbox should be disabled else the checkbox should be enabled. Should I use javascript
for this purpose? Through which event can I do this. Below are my code for textboxes.

<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtbox" Width="80px" 
onfocus="showCalendarControl(this)" AutoPostBack="True"></asp:TextBox>

<asp:TextBox ID="txtToDate" runat="server" CssClass="txtbox" Width="80px" 
onfocus="showCalendarControl(this)" AutoPostBack="True"></asp:TextBox>

I Tried to write a server side code like this, but didnt work.

If CDate(txtFromDate.Text) > Date.Now.Date Or CDate(txtToDate.Text) > Date.Now.Date Then
chkCon.Enabled = False
Else
chkCon.Enabled = True
End If

i need the event to happen just after the dates are entered in the 2 Textboxes. Someone please help me.

Thanks.

Hi sinjumujeeb,

Please try the following code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Input Dates </title>
    <script type="text/javascript">

        function disableCheckBox()
        {
            
            var dateToday = new Date();
            var txtFromDate =new Date( document.getElementById('TextBox1').value);
            if (dateToday.getTime() <txtFromDate.getTime()) {
                document.getElementById('CheckBox1').disabled = true;
            }
            else {
                alert('please enter a former date');
            }

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:toolkitscriptmanager ID="Toolkitscriptmanager1" runat="server"></asp:toolkitscriptmanager>
    <div>
        From date:<asp:TextBox ID="TextBox1" ReadOnly="true" runat="server" onchange="disableCheckBox()"></asp:TextBox><asp:Label ID="lbl_Click" runat="server" Text="CLICK ME"></asp:Label> <asp:CalendarExtender ID="CalendarExtender1" TargetControlID="TextBox1" PopupButtonID="lbl_Click" PopupPosition="TopRight" runat="server"></asp:CalendarExtender>
        To date:<asp:TextBox ID="TextBox2" runat="server" onchange="disableCheckBox()"></asp:TextBox> <asp:CalendarExtender ID="CalendarExtender2" TargetControlID="TextBox2" runat="server"></asp:CalendarExtender>
        <asp:Label ID="Label1" runat="server" Text="Calculate" onclick="showDateDifference()"></asp:Label>
        <%--<input type="checkbox" id="CheckBox1" />--%>
        <asp:CheckBox ID="CheckBox1" runat="server" />
    </div>
    </form>
</body>
</html>

and revert for more details.

I think there are following options

1) you change showCalendarControl() so that it not only sets a value but also disable required controls.
2) you do not change showCalendarControl() but create a javascript which will check in a loop (e.g. every second, using setTimeout() function) for a value of the control and disable required controls.
3) you use another calendar which will let you do what you want – example: http://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-help 

P.S.

You cannot use AutoPostBack="True" because there is no postback event fired. So the code which you have in the code-behind will not fire on the change in calendar but only if you click on submit button or any other server control on the form.

Hi sinjumujeeb

From my point of view, I suggest you use the TextBox onchange event. Please try to use the following code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

    <script type="text/javascript">
        function ValidateDate() {
            var dateToday = new Date();
            var txtFromDate = new Date(document.getElementById('TextBox1').value);
            if (dateToday.getTime() < txtFromDate.getTime()) {
                document.getElementById('CheckBox1').disabled = true;
                alert('please enter a former date');
            }
            else {
                document.getElementById('CheckBox1').disabled = false;
            }

        }
    </script>

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            Date:
            <asp:TextBox ID="TextBox1" runat="server" onchange="ValidateDate();" ></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="TextBox1" PopupButtonID="TextBox1" runat="server"></asp:CalendarExtender> <br /> <asp:CheckBox ID="CheckBox1" runat="server" /> </div>

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

Leave a Reply