how to enable/disable textbox when check the checkbox

Question

0.00/5 (No votes)

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)

XML

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

XML

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

Posted 13-Mar-13 3:55am

Umapathi K

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Prasad Khandekar · Accepted Answer · 2013-03-13T04:14:00

Solution 1

Hello Umapathi,

I have created a sample HTML using JQuery to show you how it is done.

HTML

<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"><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">
</form>

</body>
</html>
</br></br>

Basically you will have to use javascript code similar to shown below to enable the textbox.

JavaScript

$('#' + txtId).removeAttr('disabled');

To again disble the textbox use javascript code similar to shown below.

JavaScript

$('#' + 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,

Posted 13-Mar-13 4:14am

Prasad Khandekar

Comments

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.

Regards,

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.

Regards,

Umapathi K 14-Mar-13 5:21am

Prasad Khandekar 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 14-Mar-13 6:10am

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?

Regards,

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.

Regards,