Geeks With Blogs

Jonas Bush Blog.blog.blog.blog

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 ASP.Net | Back to top


Comments on this post: Enabling/disabling asp.net checkboxes through javascript

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Wow!
Great article. I never realized how ASP.NET rendered disabled items.
Left by Jason Whitehorn on Jul 28, 2006 3:01 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks! Your article helped me resolve another issue on my project.
Left by titltn21 on Aug 17, 2006 7:43 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Hey..
Thats really great stuff...
I got crazy because of one of the problem due to checkbox.. and Ur article helped me..

Thanks dude !
Left by Atm on Mar 01, 2007 1:28 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Nice job, thanks for the tip!
Left by Andrew on Mar 12, 2007 9:35 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks alot. the information provided help me to resolve one of the issue in my project
Left by Jyothi on May 14, 2007 1:31 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
This is an awesome post. Thank you very much. It works like a charm ^_^.
Left by Cuong Luc on Jul 23, 2007 3:02 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot for the post you are doing a great job..saved my hours
Left by Alkingson on Jul 24, 2007 7:44 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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
Left by Jexter on Jul 25, 2007 4:15 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great post!
MyCheckBox.disabled = false;
MyCheckBox.parentNode.disabled = false;
Works like a treat...
Left by Jon R on Oct 11, 2007 5:54 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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
Left by Abhi on Oct 20, 2007 12:25 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
This is good one!!!
Left by Govind on Jan 03, 2008 10:39 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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!
Left by Toot on Mar 17, 2008 3:12 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
@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.
Left by Jonas on Mar 17, 2008 10:04 AM

# re: Enabling/disabling Span tag
Requesting Gravatar...
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

Left by Kalim on Mar 18, 2008 12:26 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks alot Jon R. It really helped me.
Left by Srinivas on Mar 30, 2008 2:27 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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 !
Left by Dharmesh on Apr 04, 2008 3:54 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Took care of the issue, thanks much!
Left by KPACABA on Apr 08, 2008 1:21 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Excellent answer !!!!.
Left by Samba on Jun 14, 2008 8:07 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks For Excellent Answer
Left by bharath on Jun 19, 2008 7:24 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Really Thx~~~~ No wonder i can't enabled the checkbox using javascript~ You helped a lot~
Left by Maggie on Jul 04, 2008 9:05 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
how to enable and disable checkbox which is in grid by javascript in asp.net 2.0
Left by raghavedra prasad.L on Jul 17, 2008 2:10 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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!!

Left by Marie Kiran on Jul 29, 2008 3:43 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Excelente muchas gracias !!
Left by jonathan Salinas on Jul 30, 2008 12:25 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
MyCheckBox.disabled = false;
didn't solve my issue.

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

work like a charm.
Left by LS on Aug 22, 2008 8:45 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Hey ...thanx ... this help me solve another issue :)
Left by Sonali on Sep 04, 2008 1:55 AM

# re: Enabling/disabling asp.net checkboxes through javascript -- Sandeep
Requesting Gravatar...
Hey thanks saved my lots of hectic coding
Left by Sandeep Pote on Sep 22, 2008 11:11 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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!
Left by Janise Piombo on Oct 01, 2008 9:11 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
It is Great work!!! Excelent!!!
Left by Dima on Nov 05, 2008 5:24 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great Post.. very helpful.. Thnx a ton!!!
Left by Sheetal on Nov 27, 2008 11:41 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
" MyCheckBox.disabled = false;
didn't solve my issue.

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

wow ....this worked me ....................
Left by nagireddy on Jan 08, 2009 6:09 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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;
Left by Gunjesh Ranjan on Jan 15, 2009 10:20 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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
Left by richa on Jan 29, 2009 11:42 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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='';
}

Left by Arumugam on Mar 23, 2009 3:48 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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.
Left by Raman Deshmukh on Apr 09, 2009 6:17 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks!!! this article was of great help to me.
Left by Manasa on Apr 13, 2009 4:28 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot!!...it helped me to resolve a long standing issue. Truely interesting fact.
Left by Hemang on Apr 22, 2009 2:15 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot!! .
Left by siva on May 06, 2009 1:02 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
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.

Left by Fenil on May 25, 2009 1:13 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
you are a life saver. thanks.
Left by asdasd on Jun 09, 2009 2:25 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
I need to know how to disable radiobuttonlist using javascript after a a alert message..
Left by satish on Jun 18, 2009 2:23 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thank man its work for me.
Left by Rahul on Jul 09, 2009 3:16 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
you save many hours of mine.
thanks alot friend.
Left by Farrukh on Jul 13, 2009 8:29 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot. my problem solved.
Left by Narasimha on Jul 19, 2009 11:23 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot, I solved my problem on the client side itself. This saved me from updating two files instead of one.
Left by Bhawna Singh on Aug 04, 2009 5:40 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Amazing!! did not know about InputAttributes!!!
Left by Mamatha on Aug 25, 2009 7:18 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
really it is a nice and helpfull post. It resolved my issue. Thanks
Left by Anil Upadhyay on Nov 10, 2009 3:16 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
It really worked. We were struggling to solve this issue for a long time.. Thx 4 ur post
Left by Geetha on Nov 12, 2009 11:49 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Really this is awesome....it is really helpfull
Left by Pinakin on Nov 17, 2009 7:15 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Another problem solved thanks to this article. Cheers :)
Left by isildur on Dec 03, 2009 9:03 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
many thanks...my problem solved
Left by hadjie on Dec 21, 2009 2:40 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great post

First time used inputattribute property.

thnks
Left by LazyCoder on Jan 15, 2010 1:17 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot. A great article with the exact pinpointed issue that I was facing.
Left by Nikhil on Feb 22, 2010 1:56 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Yahooo! exactly what I needed.
Thank you :-)
Left by Arikooe on Feb 22, 2010 8:12 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
great post!
found solution only at this place.
Left by shrikant on Mar 04, 2010 7:09 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great thanks for this
Left by finally on Mar 09, 2010 12:53 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
This helped me so much! Thank you!
Left by Duy N9uyen on Apr 06, 2010 9:37 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great tip. Thanks!
Left by kc on Apr 07, 2010 5:53 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
great, I found the solution to my problem, thank you very much!
Left by Emmanuel on May 27, 2010 3:47 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thank you.
Left by Scott on Aug 27, 2010 12:28 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
thanks...
Left by Joseph on Sep 02, 2010 1:48 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
From Philippines thanks...
Left by Joseph on Sep 02, 2010 1:48 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks... this really helped me out!
Left by Vicki on Oct 21, 2010 9:01 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great Post. Thanks Jexter...!! Your solution worked for me.
Left by Kiran on Nov 16, 2010 3:30 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thank you very much... It really helped me.....
Left by Mark on Nov 18, 2010 11:15 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
you save my day
Left by anand on Jan 06, 2011 1:38 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks so much for posting this! Saved me a lot of time.

On my page, I am initializing all the controls in code behind, then in javascript, I have onclick and onchange handlers to enable/disable controls based on current state. I had a problem with one checkbox that I had initialized to disabled.
Left by Darren on Apr 08, 2011 11:47 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Exactly what I needed. Thanks!
Left by Gompie on May 03, 2011 1:57 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
The easy way is to disable radio button or check boxes using jQuery instead of server side code disable or html attribute enabled=false.

here is the jquery and java script code to disable radio button

$(document).ready(function() {
document.getElementById('<%=rbtnNtlm.ClientID %>').disabled = true;
document.getElementById('<%=rbtnBasic.ClientID %>').disabled = true;
});
Left by Syed Nasir Abbas on Jun 28, 2011 6:00 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks!! It helps a lot.
Left by JT on Jul 28, 2011 8:02 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
5 years on still helpful!
This had been bugging me for hours :(
Left by Andy on Nov 02, 2011 5:44 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
It was very helpfull thanks alot :)
Left by Chandra on Nov 06, 2011 12:28 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
It really helps me. thanks a lot
Left by Anahita on Jan 20, 2012 5:33 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Hi
Its work in FF without need of disabling <span> false or true But not working in IE, So you must set <span> disabled= false when you make change in <input type='checkbox'> ,
So I didn't know that before I read this article
Thanks Dude..
Left by AJay on Feb 23, 2012 9:49 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Greate work !!! thanks alot
Left by Jagdish on Mar 16, 2012 5:07 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Wow it works great :) Fixed my style issue. thanks!!..
Left by Unni on May 02, 2012 10:27 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks for the code. This was bugging me for quite some time
Left by Saikat Nandi on May 31, 2012 4:47 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
good work man !!!
thanks a ton !!!
Left by Juber N. Mulani. on Jun 06, 2012 5:31 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks for valuable post. It really helped me after 8 hours of my search in google
Left by Ramprasad on Jun 08, 2012 3:37 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot. This is what i was looking for last 3 hrs.
Left by Sri on Jun 12, 2012 7:07 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks a lot!
Left by rochelle on Jul 13, 2012 11:31 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Great Solution. It really helped me lot.
Thanks a lot Jon.
Left by Anita on Nov 20, 2012 1:16 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks so much! Great help!!
Left by Stephanie on Jan 08, 2013 8:20 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks! You saved me a lot of time.
Left by Ernesto on Apr 04, 2013 10:35 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thank You Soooo Much. That saved me from ripping my hair out.
Left by Dave S on Oct 15, 2013 4:46 PM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
You are wonderful
Left by Hani on Jun 21, 2014 7:23 AM

# re: Enabling/disabling asp.net checkboxes through javascript
Requesting Gravatar...
Thanks,Its working like charm
Left by sanil Mahabare on May 09, 2016 6:26 AM

Your comment:
 (will show your gravatar)


Copyright © Jonas Bush | Powered by: GeeksWithBlogs.net