How to change ASP.NET CheckBox control Enabled property using javascript. bug or behavior?

31 בדצמבר 2008

5 comments

Changing status to enabled\disabled for regular input type checkbox in javascript is very simple. You just need to use the javascript code:

var checkBox = document.getElementById("chkToTest");

checkBox.disabled = true\false;


Well try to use this javascript code above on ASP.NET checkbox web control when you set the server side Enabled property to false like below:



chkToTest.Enabled = false;


I'm telling you it will not work!!!!


Do you ask how to solve this bug or behavior?


You just need to set the disabled property of the parent node also. something like this:

var checkBox = document.getElementById("chkToTest");

checkBox.disabled = true;


checkBox.parentNode.disabled = true;


I don't know why but when setting the Enabled property of ASP.NET checkbox web control to false the control also render extra <SPAN> container for the checkbox and put disabled on the <SPAN> container element. So you also have to set the disabled property for this <SPAN> element, otherwise the javascript code will not work.


I wrote small application that demonstrate the problem, you can download it here.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

5 comments

  1. Shlomo1 בינואר 2009 ב 10:34

    מעניין מאוד
    הורדתי את הקוד והסתכלתי, ושתי לב שאחרי שלוחצים פעם אחת על הלחצן שעובד, גם הלחצן השני מתחיל לעבוד,
    בגלל שהלחצן שעובד עשה שהעטיפה של הפקד תהיה פעילה

    Reply
  2. Shlomo1 בינואר 2009 ב 10:50

    טוב, הסתכלתי קצת ב reflecor מה קורה, וקצת שחקתי עם זה.
    אז מה שקורה זה, שאם אתה שם checkBox של html, כדי לכתוב ליד זה טקסט, אתה צריך להוסיף בעצמך span, או כל דבר אחר כדי שיהיה כתוב ליד זה משהו, ב asp יש לך מאפיין שנקרא text, שאם אתה שם שם ערך הוא יוצר label, ליד ה checkBox, ולכן אם אתה מוסיף style כלשהו או משנה את ה disabled או מוסיף toolTip, הוא חייב לייצר מסביב לכל זה span, כדי שההגדרות יחולו גם על ה label.

    Reply
  3. Rotem Bloom1 בינואר 2009 ב 16:14

    תודה על התגובות שלמה.
    כל מה שאתה כותב זה נכון אבל זה ממש מעצבן כי קשה מאוד להבין למה זה לא עובד בהתחלה. אפשר ממש להשתגע.

    בגלל זה החלטתי לכתוב את זה כדי שאנשים אחרים לא יתקעו עם זה שעות.

    Reply
  4. Doc24 בפברואר 2009 ב 0:51

    This is a bug, as you can see from this link. http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=255203
    Your suggestion works well but where I encountered an issue was when doing an Ajax postback I was having to regenerate my checkbox controls and wanted to be able to specify whether they were still Disabled or not this resulted in javascript failures because sometimes parentNode existed and sometimes not, easy enough to add a check for that but frustrating. I just eneded up doing as the above article's workaround suggests.. used the HtmlInputCheckBox control. Thanks again for your article.

    Thanks,
    Doc

    Reply
  5. sam12 באוקטובר 2011 ב 11:18

    Excellent brother….. It works…. Thank a lot….:)

    Reply