Posts
16
Comments
100
Trackbacks
18
Enabling/disabling asp.net checkboxes through javascript

The problem:

You want to have a web form with multiple checkboxes, and have some of them be enabled or disabled depending on whether a certain checkbox is checked (or radio button selected, or what have you).

At first glance, this seems fairly simple; you can just do:

<%=myCheckBox.ClientID%>.disabled = false;

in javascript.

The problem comes when you, on the server side, disable the checkbox by default. (NB: this pertains to ASP.Net 2.0, it may work differently in 1.x). The problem is that an <asp:checkbox /> control gets rendered out like this:

<span><input type='checkbox'></span>

The real problem comes when you have a checkbox like this: <asp:checkbox enabled=”false” />. This gets rendered out like this:

<span disabled='disabled'><input type='checkbox' disabled='disabled'></span>

Can you see the problem? In our javascript, when we enable the input, we're not enabling the surrounding span. As it happens, in FireFox, this doesn't seem to be an issue (the checkbox will be enabled as you would expect). In IE6, however, the checkbox will be disabled because the surrounding span is disabled.

To get around this, you can do the following instead of saying myCheckBox.Enabled = false in your code-behind:

myCheckBox.InputAttributes.Add(”disabled”, “disabled”);

(There's also a “LabelAttributes” property of the checkbox, if your control has text that you want to give attributes to explicitly).

Hope this helps!

posted on Thursday, July 27, 2006 10:10 PM Print
Comments
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Jason Whitehorn
7/28/2006 3:01 AM
Wow!
Great article. I never realized how ASP.NET rendered disabled items.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
titltn21
8/17/2006 7:43 AM
Thanks! Your article helped me resolve another issue on my project.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Tom
2/22/2007 2:38 AM
Yeah this is the first place I have seen refernce to the InputAttributes property to solve this nasty problem
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Atm
3/1/2007 1:28 AM
Hey..
Thats really great stuff...
I got crazy because of one of the problem due to checkbox.. and Ur article helped me..

Thanks dude !
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Andrew
3/12/2007 9:35 AM
Nice job, thanks for the tip!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Jyothi
5/14/2007 1:31 AM
Thanks alot. the information provided help me to resolve one of the issue in my project
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Cuong Luc
7/23/2007 3:02 AM
This is an awesome post. Thank you very much. It works like a charm ^_^.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Alkingson
7/24/2007 7:44 AM
Thanks a lot for the post you are doing a great job..saved my hours
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Jexter
7/25/2007 4:15 PM
Along with setting the input controls disabled prop you can also set its parent element to the same value, this will fix the &quot;span&quot; issue.

Like so:

MyCheckBox.disabled = false;
MyCheckBox.parentNode.disabled = false;

Seemed to work for me. Your solution also worked for me but this was easier for me to impliment
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Jon R
10/11/2007 5:54 AM
Great post!
MyCheckBox.disabled = false;
MyCheckBox.parentNode.disabled = false;
Works like a treat...
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Abhi
10/20/2007 12:25 PM
Wow Superb. I spent 2 days to solve it before I landed on this page.

By the way, the previous post by Jexter is fine but this will not take care if you want client script to enable / disable checkbox based on some trigger. The solution presented in the blog will help
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Govind
1/3/2008 10:39 PM
This is good one!!!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Toot
3/17/2008 3:12 AM
Great post! Is there a way of getting at the LabelAttribute in the client-side javascript? I'd like the label to reflect the state of the control... Cheers!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Jonas
3/17/2008 10:04 AM
@Toot: Doesn't look like it, it creates a <label for="foo"> tag, however, and it looks like "Foo" is the ClientID of the checkbox control, so you may be able to access it that way.
Gravatar
# re: Enabling/disabling Span tag
Kalim
3/18/2008 12:26 AM
Please can any body help me in disabling the span tag which is also supported in mozilla

disabled="disbaled" is working for the IE but not for mozilla

Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Srinivas
3/30/2008 2:27 PM
Thanks alot Jon R. It really helped me.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Dharmesh
4/4/2008 3:54 AM
Thanks a lot Jonas , great post. I was about to give on this and change my approach to fix the problem. I found your post and it resolved my problem.

Thanks Again !
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
KPACABA
4/8/2008 1:21 PM
Took care of the issue, thanks much!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Samba
6/14/2008 8:07 AM
Excellent answer !!!!.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
bharath
6/19/2008 7:24 AM
Thanks For Excellent Answer
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Maggie
7/4/2008 9:05 PM
Really Thx~~~~ No wonder i can't enabled the checkbox using javascript~ You helped a lot~
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
raghavedra prasad.L
7/17/2008 2:10 AM
how to enable and disable checkbox which is in grid by javascript in asp.net 2.0
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Marie Kiran
7/29/2008 3:43 AM
Awesome!! Saved me a lotta time.. Microsoft does what they feel like in every new version.. and we need to cram our heads. Thanks to people like you(counter cramers), we get the much needed relief and speed things up...

Excellent work!!

Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
jonathan Salinas
7/30/2008 12:25 PM
Excelente muchas gracias !!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
LS
8/22/2008 8:45 PM
MyCheckBox.disabled = false;
didn't solve my issue.

However,
MyCheckBox.disabled = false;
+
MyCheckBox.parentNode.disabled = false;

work like a charm.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Sonali
9/4/2008 1:55 AM
Hey ...thanx ... this help me solve another issue :)
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript -- Sandeep
Sandeep Pote
9/22/2008 11:11 PM
Hey thanks saved my lots of hectic coding
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Janise Piombo
10/1/2008 9:11 AM
Jonash,
Great post! I've been working around with a similar issue for 2 hs until I find your post and solve it!
Thanks from Argentina!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Dima
11/5/2008 5:24 AM
It is Great work!!! Excelent!!!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Sheetal
11/27/2008 11:41 PM
Great Post.. very helpful.. Thnx a ton!!!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
nagireddy
1/8/2009 6:09 AM
" MyCheckBox.disabled = false;
didn't solve my issue.

However,
MyCheckBox.disabled = false;
+
MyCheckBox.parentNode.disabled = false; "

wow ....this worked me ....................
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Gunjesh Ranjan
1/15/2009 10:20 PM
You can easily use javascript for enabling check box


for Enable Checkbox

document.getElementById("<%=checkbox1.ClientID%>").disabled=false;

For disabled Check box

document.getElementById("<%=checkbox1.ClientID%>").disabled=true;
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
richa
1/29/2009 11:42 AM
super article i got the same problem when disableing and enabling check box but could slove by add the line of code specified in this article it worked fine..... thank for the inputs i appriciate it keep up th good job
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Arumugam
3/23/2009 3:48 AM
i have found how to enable/disable asp control through javascript checkbox checked/unchecked

var obj=document.getElementById('checkbox1');

//Disable use this
if(obj.checked)
{
obj.disabled="disabled";
}
else //for enable Make dat back to null by single codes(' ') so it ll work.
{
obj.disabled='';
}

Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Raman Deshmukh
4/9/2009 6:17 AM
Great post.. very helpful! I've been working around with a same issue for atleast 4 hs until I find your post and solve it!
once again THANKS for a such helpful post.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Manasa
4/13/2009 4:28 AM
Thanks!!! this article was of great help to me.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Hemang
4/22/2009 2:15 AM
Thanks a lot!!...it helped me to resolve a long standing issue. Truely interesting fact.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
siva
5/6/2009 1:02 PM
Thanks a lot!! .
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Fenil
5/25/2009 1:13 AM
while using myCheckBox.InputAttributes.Add(”disabled”, “disabled”) works well but the problem is if previously the checkbox was checked & then disabled then on button click the state of the checkbox is lost. so any workaround for this?

while using MyCheckBox.disabled = false
MyCheckBox.parentNode.disabled = false in VB.NET it says parentNode is not a member of System.Web.UI.WebControls.Checkbox.

Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
asdasd
6/9/2009 2:25 PM
you are a life saver. thanks.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
satish
6/18/2009 2:23 AM
I need to know how to disable radiobuttonlist using javascript after a a alert message..
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Rahul
7/9/2009 3:16 AM
Thank man its work for me.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Farrukh
7/13/2009 8:29 AM
you save many hours of mine.
thanks alot friend.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Narasimha
7/19/2009 11:23 PM
Thanks a lot. my problem solved.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Bhawna Singh
8/4/2009 5:40 AM
Thanks a lot, I solved my problem on the client side itself. This saved me from updating two files instead of one.
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Mamatha
8/25/2009 7:18 AM
Amazing!! did not know about InputAttributes!!!
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Anil Upadhyay
11/10/2009 3:16 PM
really it is a nice and helpfull post. It resolved my issue. Thanks
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Geetha
11/12/2009 11:49 PM
It really worked. We were struggling to solve this issue for a long time.. Thx 4 ur post
Gravatar
# re: Enabling/disabling asp.net checkboxes through javascript
Pinakin
11/17/2009 7:15 AM
Really this is awesome....it is really helpfull

Post Comment

Title *
Name *
Email
Url
Comment *  
News