I encountered a small problem during my work today, as shown below. When I set the Checkbox Enable value to false on the background page, I use the script (chk. disabled = false). The value of disabled cannot be changed to false. The Code is as follows:
Front-end code:
Front-end code<title></title>
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.disabled = false;
}
else {
chk.disabled = true;
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkBlog" runat="server" Text="http://owen-zhang.cnblogs.com"></asp:CheckBox>
<asp:Button ID="btnCheck" runat="server" Text="Client check" OnClientClick="foo();return false;" />
</div>
</form>
</body>
Background code:
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.Enabled = false;
}Why is this happening? Let's take a look at the source code of html, as shown below:
<span disabled="disabled"> <input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label></span>When the Enable attribute of the original Checkbox control is false, the output to Html becomes a group of controls (elements), rather than a control we expected.
Solution 1:
In the above Code, although we changed the disabled attribute of the chkBlog control to false, the disabled attribute of the parent node (<span>) of the chkBlog control is still disabled. This is a matter of priority. Generally, the priority of the parent node is greater than that of the child node. Therefore, we need to change the value of disabled of the parent node, the preceding client script code must be modified as follows:
Code
<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 the highlighted code above is added.
Solution 2:
In solution 1, you must add an additional statement to change the disabled attribute of the parent node. When there are many places to modify the statement, it is more troublesome, in addition, it does not conform to the common code logic and has redundant code. Is there any other more concise method? Yes ~, We only need to modify the background Code as follows:
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.InputAttributes.Add("disabled", "disabled");
}That is, we do not change the Enable attribute of the Checkbox, but change the Html content output from the Checkbox to the client through the attribute settings in InputAttributes, as shown below:
<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
<label for="chkBlog">http://owen-zhang.cnblogs.com</label>The "redundant" parent node is absent now.
For details about the InputAttributes attribute of Checkbox, refer to the following link.
Http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.inputattributes.aspx
Code: http://files.cnblogs.com/owen-zhang/CheckboxClientDisabled.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
