I have a little problem with my work today, as follows: When I set the checkbox's enable value to false in the background page, I used the script (chk.disabled = false) in the front page, and cannot change the value of disabled to false, the code is as follows.
Foreground code:
Background code:
protected void Page_Load (object sender, EventArgs e)
{
this.chkBlog.Enabled = false;
}
Why is this happening, let's look at the HTML source code, as follows:
<span disabled= "Disabled" >
<input id= "Chkblog" type= "checkbox" Name= "Chkblog" disabled= "disabled"/>
<label for= "Chkblog" >http://owen-zhang.cnblogs.com</label>
</span>
The original CheckBox control when the Enable property is False, the output into HTML becomes a set of controls (element) rather than one of the controls we expect.
Programme I:
In the code above, although we changed the disabled property of the Chkblog control to false, the disabled property of the Chkblog control's parent node (<span>) is disabled. This has a priority problem, usually the parent node priority is greater than the child node, so we want to change the parent node disabled value, the above client script code to do a little bit of modification, as follows:
<script type= "Text/javascript" >
function foo () {
var chk = document.getElementById ("<%= Chkblog.clientid%> ");
if (chk.disabled) {
chk.parentNode.disabled = false;
chk.disabled = false;
}
else {
chk.parentNode.disabled = true;
Chk.disabled = true;
}
}
</script>
Only add the code highlighted above.
Programme II:
Using scenario one, you must add an additional statement that changes the disabled attribute of the parent node, which is more troublesome when you want to modify it, and does not conform to the usual code logic and has redundant code. Is there any other way to be more concise? Yes, we just need to modify the background code as follows:
protected void Page_Load (object sender, EventArgs e)
{
this.chkBlog.InputAttributes.Add ("Disabled", " Disabled ");
}
That is, instead of changing the checkbox's Enable property, we change the HTML content of the checkbox output to the client by setting the property in Inputattributes, as follows:
<input id= "Chkblog" type= "checkbox" Name= "Chkblog" disabled= "disabled"/> <label for= "Chkblog" >http
://owen-zhang.cnblogs.com</label>
Previously "redundant" parent node, not now.