Click here to Skip to main content
13,046,660 members (68,332 online)
Rate this:
Please Sign up or sign in to vote.
See more:
i used below coding to enable/disbale textbox when user check checkbox. by default it should be disable when user check it have to be enable. i tried this but not working.
(Note: by default its in disable mode but when i check the checkbox still in disable mode)

<script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/global-script.js" type="text/javascript"></script>
    <script src="../js/jquery-1.5.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
       $(document).ready(function() {
 $("input[type=textbox][id*=txtfrmDate]").attr("disabled", true);
$("input[type=checkbox][id*=ChkDate]").click(function() {
if (this.checked)
    $(this).closest("tr").find("input[type=text][id*=txtfrmDate]").attr("disabled", false);
    $(this).closest("tr").find("input[type=text][id*=txtfrmDate]").attr("disabled", true);

<asp:TextBox ID="txtfrmDate" runat="server" CssClass="txtbox datebox"  Style="z-index: 98; width: 100px;">          </asp:TextBox>
Posted 13-Mar-13 3:55am
Darkness_07 13-Mar-13 10:24am
("Your codes")-> $(this).closest("tr").find("input[type=text][id*=txtfrmDate]").attr("disabled", false);

I think you miss this "box" in your input[type=text]

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Hello Umapathi,

I have created a sample HTML using JQuery to show you how it is done.
<script src="" type="text/Javascript"></script>
<script type="text/JavaScript">
function enableName(ctrl, txtId) {
if (ctrl.checked)
    $('#' + txtId).removeAttr('disabled');
    $('#' + txtId).attr('disabled', 'disabled');
<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"  id="lname" disabled><input type="checkbox" id="chkName" name="chkName" onclick="enableName(this, 'lname');"/><br>
  <input type="submit" value="Submit">

Basically you will have to use javascript code similar to shown below to enable the textbox.
$('#' + txtId).removeAttr('disabled');
To again disble the textbox use javascript code similar to shown below.
$('#' + txtId).attr('disabled', 'disabled');
Also from your code I suggest that you use direct ID of the textbox rather than using closest & find. Remember ID's are unique in a page. i.e. No two controls should have same id.

Umapathi K 14-Mar-13 0:48am
its working fine in mozilla but not in IE and Chrome..
Prasad Khandekar 14-Mar-13 1:54am
Hello Umapathi,

Have u tried using id to locate the textbox. Are u getting any errors? For firefox please check the error console Ctrl +Shift +J. May be your javascript code is not finding the control. The sinippet I have posted works in IE 8, Mozilla & Chrome.

Umapathi K 14-Mar-13 5:03am
its not working
Prasad Khandekar 14-Mar-13 5:18am
Hello Umapathi,

It seems that you are using a way to old jquery library. Can you try using the latest which is 1.9.1. Also did you see any error in IE Developer ToolBar Console window or Chrome Browsers Console Window.

Umapathi K 14-Mar-13 5:21am
<script src="" type="text/Javascript"></script>
using this.,
in console i am not getting any error
Prasad Khandekar 14-Mar-13 5:41am

How are you finding the textbox? Are us using $(this).closest("tr").find("input[type=text][id*=txtfrmDate]") or $('#txtfrmDate'). I suggest to use later.

Umapathi K 14-Mar-13 6:10am
function enableTextBox() {
var textBoxID = "<%= txtToDate.ClientID %>";
var textBoxID1 = "<%= txtfrmDate.ClientID %>";
if (document.getElementById("<%= ChkDate.ClientID %>").checked == true) {
document.getElementById(textBoxID).disabled = false;
document.getElementById(textBoxID1).disabled = false;
else {
document.getElementById(textBoxID).disabled = true;
document.getElementById(textBoxID1).disabled = true;
document.getElementById('<%= txtfrmDate.ClientID %>').value = "";
document.getElementById('<%= txtToDate.ClientID %>').value = "";

<asp:CheckBox ID="ChkDate" runat="server" Text="GRN Site Date" Checked="false" TextAlign="Left" OnChange="enableTextBox();"/>
  From Date  

<asp:TextBox ID="txtfrmDate" runat="server" CssClass="txtbox datebox" Style="z-index: 98; width: 100px;" Enabled="false">

ID="CalendarExtender1" önClientShown="calendarShown" runat="server" TargetControlID="txtfrmDate"
PopupButtonID="Image2" Format="dd/MM/yyyy" CssClass="cal_Theme1">
<span class="tdMsg">*</span>

  To Date  
<asp:TextBox ID="txtToDate" runat="server" CssClass="txtbox datebox" Style="z-index: 98; width: 100px;" Enabled="false">

<ajax:CalendarExtender ID="CalendarExtender2" önClientShown="calendarShown" runat="server" TargetControlID="txtToDate"
PopupButtonID="Image2" Format="dd/MM/yyyy" CssClass="cal_Theme1">
<span class="tdMsg">*</span>

the above coding i am using to show calendar.. its working fine in mozilla but not workin in chrome and IE
Prasad Khandekar 14-Mar-13 6:39am
Hello Umapathi,First change your javascript call as shown below.

<asp:CheckBox ID="ChkDate" runat="server" Text="GRN Site Date" Checked="false" TextAlign="Left" OnChange="enableTextBox(this);"/>

Then change the function itself as shown below.

function enableTextBox(ctrl) {
if (ctrl.checked) {

document.getElementById('txtfrmDate').disabled = false;

document.getElementById('txtToDate').disabled = false;

} else {

document.getElementById('txtfrmDate').disabled = true;

document.getElementById('txtToDate').disabled = true;

document.getElementById('txtfrmDate').value = "";

document.getElementById('txtToDate').value = "";

In your case the clientID is going to remain same as the ID.Regards,
Umapathi K 14-Mar-13 7:18am
Timestamp: 3/14/2013 4:45:22 PM
Error: TypeError: document.getElementById(...) is null

i am getting this error
Prasad Khandekar 14-Mar-13 7:39am
Hello Umapathi,

On which line you are getting error and in which browser? Ar u using IE6?

Umapathi K 14-Mar-13 7:52am
mozilla and chrome..
Prasad Khandekar 14-Mar-13 8:51am
Hello Umapathi,

Open Firebug & goto to Console Tab. In the bottom you will see a textbox with an icon and prompt as >>> type in document.getElementById('txtfrmDate') and hit enter. It should print the HTML for the control and not null. If it does not that means the ID of the rendered element is wrong. To find out in the Firebug navigate to tab named HTML and then from the left side click second icon (icon with a squqare and arrow pointing left top). Now in your page click on the txtfrmDate. The corrosponding DOM element will be highlighted in DOM Tree shown in Firebug. Check the id of the element. You will have to use thay ID. Although in your case it should be txtfrmDate.


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170713.1 | Last Updated 13 Mar 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100