Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
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);
else
    $(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
Comments
Darkness_07 at 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
good
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.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/Javascript"></script>
<script type="text/JavaScript">
function enableName(ctrl, txtId) {
if (ctrl.checked)
    $('#' + txtId).removeAttr('disabled');
else
    $('#' + txtId).attr('disabled', 'disabled');
}
</script>
</head>
<body>
 
<form action="demo_form.asp">
  First name: <input type="text" name="fname">
 
  Last name: <input type="text" name="lname"  id="lname" disabled><input type="checkbox" id="chkName" name="chkName" onclick="enableName(this, 'lname');"/>
 
  <input type="submit" value="Submit">
</form>
 
</body>
</html>
</br></br>
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.
 
Regards,
  Permalink  
Comments
Umapathi K at 14-Mar-13 0:48am
   
its working fine in mozilla but not in IE and Chrome..
Prasad Khandekar at 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.
 
Regards,
Umapathi K at 14-Mar-13 5:03am
   
its not working
Prasad Khandekar at 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.
 
Regards,
Umapathi K at 14-Mar-13 5:21am
   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/Javascript"></script>
using this.,
in console i am not getting any error
Prasad Khandekar at 14-Mar-13 5:41am
   
Hello,
 
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.
 
Regards,
Umapathi K at 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">


<ajax:CalendarExtender
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 at 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 at 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 at 14-Mar-13 7:39am
   
Hello Umapathi,
 
On which line you are getting error and in which browser? Ar u using IE6?
 
Regards,
Umapathi K at 14-Mar-13 7:52am
   
mozilla and chrome..
Prasad Khandekar at 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.
 
Regards,

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



Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | Last Updated 13 Mar 2013
Copyright © CodeProject, 1999-2014
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