Problem enabling checkbox from client-side javascript - help!

[James Radke]

Hello,

I have a strange problem. I have a repeater control which has as two
columns checkbox controls. In the repeater ItemDataBound event, I set the
first check box Checked status appropriately based on the value from a field
in the repeater data row. Then, if the first checkbox is not checked, I
disable the second checkbox in that row. Finally, I add an OnClick
attribute so that when the first check box is clicked, a client-side
javascript is executed.

This client side javascript simply enables or disables the second check box.
For example, if the first check box is selected, the javascript executes and
enables the second check box; if the first check box is de (un?)-selected,
the javascript function will disable the second check box.

Now, for the strange part: If the second check box is initially enabled
(i.e. the first checkbox is selected) everything works perfectly. However,
if the second check box is initially disabled (i.e. first checkbox is not
selected, I can ever enable the second checkbox from the javascript?

Can someone tell me why this is happening and what I can do to correct it?

Thanks!

Jim

 

[Jeffrey Tan[MSFT]]

Hi James,

Thank you for posting in the community! My name is Jeffrey, and I will be
assisting you on this issue.

Based on my understanding, you have a repeater control, which contains 2
checkboxes controls, which the first one's status was initilized judging
from other fileds value.
And you initialize your second checkbox status in repeater databound event.
You want to enable and disable the second checkbox based on the checked
state of the first checkbox through client javascript. But if the second
checkbox is inialized disabled, you can not enable the second checkbox.

========================================================
Actually, Asp.Net CheckBox control encapsulate html <input type="checkbox">
and <lable>, and both them included in a <span> tag.(You can add a CheckBox
server control in web form set its text property and run it, then view the
html source code to determine this)

If you disable your CheckBox in server side, Asp.Net will both disable
<span> tag(which is the <input type="checkbox">'s parent html tag) and
<input type="checkbox"> tag, rendered html code snippet like this:
<span disabled="disabled" style="width:50px;"><input
id="Repeater1__ctl9_checkbox2" type="checkbox"
name="Repeater1:_ctl9:checkbox2" disabled="disabled" /><label
for="Repeater1__ctl9_checkbox2">checkbox</label></span>

So in your client side javascript code, you should both enable your <span>
tag and <input type="checkbox"> tag.

You can try the following Solution to see if it helps resolve your issue:

private void Repeater1_ItemDataBound(object sender,
System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
RepeaterItem ri=e.Item;

if(ri.ItemType==ListItemType.Item||ri.ItemType==ListItemType.AlternatingItem
)
{
CheckBox cb1=null, cb2=null;
foreach(Control c in ri.Controls)
{
if(c is System.Web.UI.WebControls.CheckBox)
{
if(c.ID=="checkbox1")
{
cb1=(CheckBox)c;
}
else if(c.ID=="checkbox2")
{
cb2=(CheckBox)c;
}
}
}

if(cb1.Checked==true)
{
cb2.Enabled=false;
}

cb1.Attributes.Add("onclick","update_checkbox(this,'"+cb2.ClientID+"')");

}

StringBuilder sb=new StringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("function update_checkbox(obj,checkboxid)");
sb.Append("{");
sb.Append("if(obj.checked==true)");
sb.Append("{");
sb.Append("document.all(checkboxid).parentNode.disabled=true;");
sb.Append("document.all(checkboxid).disabled=true;");
sb.Append("}");
sb.Append("else");
sb.Append("{");
sb.Append("document.all(checkboxid).parentNode.disabled=false;");
sb.Append("document.all(checkboxid).disabled=false;");
sb.Append("}");
sb.Append("}");
sb.Append("</script>");

Page.RegisterClientScriptBlock("update",sb.ToString());
}

In the code, the registered javascript code like this(<span> is <input
type="checkbox">'s parent node):

<script language="javascript">
function update_checkbox(obj,checkboxid)
{
if(obj.checked==true)
{
document.all(checkboxid).parentNode.disabled=true;
document.all(checkboxid).disabled=true;
}
else
{
document.all(checkboxid).parentNode.disabled=false;
document.all(checkboxid).disabled=false;
}
}
</script>

=========================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice day!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

 

[James Radke]

Jeffrey,

Well, that was an easy solution!

Why does it disable the span? In order to encapsulate both the possible
text, and checkbox? This is the first time that I have found that to be the
case. I had no problems with textboxes, listboxes, buttons, etc..

Thanks for the assistance!

Jim

Hi James,

Thank you for posting in the community! My name is Jeffrey, and I will be
assisting you on this issue.

Based on my understanding, you have a repeater control, which contains 2
checkboxes controls, which the first one's status was initilized judging
from other fileds value.
And you initialize your second checkbox status in repeater databound event.
You want to enable and disable the second checkbox based on the checked
state of the first checkbox through client javascript. But if the second
checkbox is inialized disabled, you can not enable the second checkbox.

========================================================
Actually, Asp.Net CheckBox control encapsulate html <input type="checkbox">
and <lable>, and both them included in a <span> tag.(You can add a CheckBox
server control in web form set its text property and run it, then view the
html source code to determine this)

If you disable your CheckBox in server side, Asp.Net will both disable
<span> tag(which is the <input type="checkbox">'s parent html tag) and
<input type="checkbox"> tag, rendered html code snippet like this:
<span disabled="disabled" style="width:50px;"><input
id="Repeater1__ctl9_checkbox2" type="checkbox"
name="Repeater1:_ctl9:checkbox2" disabled="disabled" /><label
for="Repeater1__ctl9_checkbox2">checkbox</label></span>

So in your client side javascript code, you should both enable your <span>
tag and <input type="checkbox"> tag.

You can try the following Solution to see if it helps resolve your issue:

private void Repeater1_ItemDataBound(object sender,
System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
RepeaterItem ri=e.Item;

if(ri.ItemType==ListItemType.Item||ri.ItemType==ListItemType.AlternatingItem
)
{
CheckBox cb1=null, cb2=null;
foreach(Control c in ri.Controls)
{
if(c is System.Web.UI.WebControls.CheckBox)
{
if(c.ID=="checkbox1")
{
cb1=(CheckBox)c;
}
else if(c.ID=="checkbox2")
{
cb2=(CheckBox)c;
}
}
}

if(cb1.Checked==true)
{
cb2.Enabled=false;
}

cb1.Attributes.Add("onclick","update_checkbox(this,'"+cb2.ClientID+"')");

}

StringBuilder sb=new StringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("function update_checkbox(obj,checkboxid)");
sb.Append("{");
sb.Append("if(obj.checked==true)");
sb.Append("{");
sb.Append("document.all(checkboxid).parentNode.disabled=true;");
sb.Append("document.all(checkboxid).disabled=true;");
sb.Append("}");
sb.Append("else");
sb.Append("{");
sb.Append("document.all(checkboxid).parentNode.disabled=false;");
sb.Append("document.all(checkboxid).disabled=false;");
sb.Append("}");
sb.Append("}");
sb.Append("</script>");

Page.RegisterClientScriptBlock("update",sb.ToString());
}

In the code, the registered javascript code like this(<span> is <input
type="checkbox">'s parent node):

<script language="javascript">
function update_checkbox(obj,checkboxid)
{
if(obj.checked==true)
{
document.all(checkboxid).parentNode.disabled=true;
document.all(checkboxid).disabled=true;
}
else
{
document.all(checkboxid).parentNode.disabled=false;
document.all(checkboxid).disabled=false;
}
}
</script>

=========================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice day!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

 

[Jeffrey Tan[MSFT]]

Hi James,

Does my reply resolve your problem?
If it still does not work, please feel free to let me know, I will work
with you. Thanks

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.