Jonas Bush

Blog.blog.blog.blog
posts - 16, comments - 161, trackbacks - 17

My Links

News

Archives

Post Categories

Image Galleries

General

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!

  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Print | posted on Thursday, July 27, 2006 10:10 PM | Filed Under [ ASP.Net ]

Feedback

Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Wow!
Great article. I never realized how ASP.NET rendered disabled items.
7/28/2006 3:01 AM | Jason Whitehorn
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks! Your article helped me resolve another issue on my project.
8/17/2006 7:43 AM | titltn21
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Hey..
Thats really great stuff...
I got crazy because of one of the problem due to checkbox.. and Ur article helped me..

Thanks dude !
3/1/2007 1:28 AM | Atm
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Nice job, thanks for the tip!
3/12/2007 9:35 AM | Andrew
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks alot. the information provided help me to resolve one of the issue in my project
5/14/2007 1:31 AM | Jyothi
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

This is an awesome post. Thank you very much. It works like a charm ^_^.
7/23/2007 3:02 AM | Cuong Luc
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks a lot for the post you are doing a great job..saved my hours
7/24/2007 7:44 AM | Alkingson
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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
7/25/2007 4:15 PM | Jexter
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Great post!
MyCheckBox.disabled = false;
MyCheckBox.parentNode.disabled = false;
Works like a treat...
10/11/2007 5:54 AM | Jon R
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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
10/20/2007 12:25 PM | Abhi
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

This is good one!!!
1/3/2008 10:39 PM | Govind
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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!
3/17/2008 3:12 AM | Toot
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

@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.
3/17/2008 10:04 AM | Jonas
Gravatar

# re: Enabling/disabling Span tag

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

3/18/2008 12:26 AM | Kalim
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks alot Jon R. It really helped me.
3/30/2008 2:27 PM | Srinivas
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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 !
4/4/2008 3:54 AM | Dharmesh
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Took care of the issue, thanks much!
4/8/2008 1:21 PM | KPACABA
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Excellent answer !!!!.
6/14/2008 8:07 AM | Samba
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks For Excellent Answer
6/19/2008 7:24 AM | bharath
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Really Thx~~~~ No wonder i can't enabled the checkbox using javascript~ You helped a lot~
7/4/2008 9:05 PM | Maggie
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

how to enable and disable checkbox which is in grid by javascript in asp.net 2.0
7/17/2008 2:10 AM | raghavedra prasad.L
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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!!

7/29/2008 3:43 AM | Marie Kiran
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Excelente muchas gracias !!
7/30/2008 12:25 PM | jonathan Salinas
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

MyCheckBox.disabled = false;
didn't solve my issue.

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

work like a charm.
8/22/2008 8:45 PM | LS
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Hey ...thanx ... this help me solve another issue :)
9/4/2008 1:55 AM | Sonali
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript -- Sandeep

Hey thanks saved my lots of hectic coding
9/22/2008 11:11 PM | Sandeep Pote
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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!
10/1/2008 9:11 AM | Janise Piombo
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

It is Great work!!! Excelent!!!
11/5/2008 5:24 AM | Dima
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Great Post.. very helpful.. Thnx a ton!!!
11/27/2008 11:41 PM | Sheetal
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

" MyCheckBox.disabled = false;
didn't solve my issue.

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

wow ....this worked me ....................
1/8/2009 6:09 AM | nagireddy
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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;
1/15/2009 10:20 PM | Gunjesh Ranjan
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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
1/29/2009 11:42 AM | richa
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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='';
}

3/23/2009 3:48 AM | Arumugam
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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.
4/9/2009 6:17 AM | Raman Deshmukh
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks!!! this article was of great help to me.
4/13/2009 4:28 AM | Manasa
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks a lot!!...it helped me to resolve a long standing issue. Truely interesting fact.
4/22/2009 2:15 AM | Hemang
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks a lot!! .
5/6/2009 1:02 PM | siva
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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.

5/25/2009 1:13 AM | Fenil
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

you are a life saver. thanks.
6/9/2009 2:25 PM | asdasd
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

I need to know how to disable radiobuttonlist using javascript after a a alert message..
6/18/2009 2:23 AM | satish
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thank man its work for me.
7/9/2009 3:16 AM | Rahul
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

you save many hours of mine.
thanks alot friend.
7/13/2009 8:29 AM | Farrukh
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks a lot. my problem solved.
7/19/2009 11:23 PM | Narasimha
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks a lot, I solved my problem on the client side itself. This saved me from updating two files instead of one.
8/4/2009 5:40 AM | Bhawna Singh
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Amazing!! did not know about InputAttributes!!!
8/25/2009 7:18 AM | Mamatha
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

really it is a nice and helpfull post. It resolved my issue. Thanks
11/10/2009 3:16 PM | Anil Upadhyay
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

It really worked. We were struggling to solve this issue for a long time.. Thx 4 ur post
11/12/2009 11:49 PM | Geetha
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Really this is awesome....it is really helpfull
11/17/2009 7:15 AM | Pinakin
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Another problem solved thanks to this article. Cheers :)
12/3/2009 9:03 AM | isildur
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

many thanks...my problem solved
12/21/2009 2:40 AM | hadjie
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Great post

First time used inputattribute property.

thnks
1/15/2010 1:17 AM | LazyCoder
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks a lot. A great article with the exact pinpointed issue that I was facing.
2/22/2010 1:56 AM | Nikhil
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Yahooo! exactly what I needed.
Thank you :-)
2/22/2010 8:12 AM | Arikooe
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

great post!
found solution only at this place.
3/4/2010 7:09 AM | shrikant
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Great thanks for this
3/9/2010 12:53 PM | finally
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

This helped me so much! Thank you!
4/6/2010 9:37 AM | Duy N9uyen
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Great tip. Thanks!
4/7/2010 5:53 AM | kc
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

great, I found the solution to my problem, thank you very much!
5/27/2010 3:47 PM | Emmanuel
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thank you.
8/27/2010 12:28 PM | Scott
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

thanks...
9/2/2010 1:48 AM | Joseph
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

From Philippines thanks...
9/2/2010 1:48 AM | Joseph
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks... this really helped me out!
10/21/2010 9:01 AM | Vicki
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Great Post. Thanks Jexter...!! Your solution worked for me.
11/16/2010 3:30 PM | Kiran
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thank you very much... It really helped me.....
11/18/2010 11:15 PM | Mark
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

you save my day
1/6/2011 1:38 AM | anand
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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.
4/8/2011 11:47 AM | Darren
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Exactly what I needed. Thanks!
5/3/2011 1:57 AM | Gompie
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

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;
});
6/28/2011 6:00 AM | Syed Nasir Abbas
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

Thanks!! It helps a lot.
7/28/2011 8:02 AM | JT
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

5 years on still helpful!
This had been bugging me for hours :(
11/2/2011 5:44 AM | Andy
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

It was very helpfull thanks alot :)
11/6/2011 12:28 AM | Chandra
Gravatar

# re: Enabling/disabling asp.net checkboxes through javascript

It really helps me. thanks a lot
1/20/2012 5:33 AM | Anahita
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: