Home>

I encountered a small problem at work today.details as following,When I set the checkbox enable value to false in the background page, I used a script (chk.disabled=false) in the front-end page. I cannot change the disabled value to false. Let ’s see how we solve this problem.

I encountered a small problem at work today.details as following,When I set the checkbox enable value to false in the background page, I used a script (chk.disabled=false) in the front-end page, and I cannot change the disabled value to false. The code is as follows:

Front desk code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <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>
</head>
<body>
  <form runat="server">
  <div>
    <asp:checkbox runat="server" text="http://owen-zhang.cnblogs.com"></asp:checkbox>
    <asp:button runat="server" text="client check" onclientclick="foo ();return false;" />
  </div>
  </form>
</body>
</html>

Background code:

 protected void page_load (object sender, eventargs e)
  {
    this.chkblog.enabled=false;
  }
</pre>
</div>
<p>
Why does this happen,Let's take a look at the source code of html as follows:
</p>
<div>
<pre>
<span disabled="disabled">
<input type="checkbox" name="chkblog" disabled="disabled" />
<label for="chkblog">http://owen-zhang.cnblogs.com</label>
</span>

It turns out that when the enable property is false, the output to the html becomes a group of controls (elements) instead of the one we expected.

Option One:

In the above code,Although we changed the disabled property of the chkblog control to false, the disabled property of the parent node () of the chkblog control is still disabled. This has a priority issue,Generally, the priority of the parent node is greater than the child node.Therefore, we need to change the disabled value of the parent node. The client script code above needs to be modified a little.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>

Just add the code highlighted above.

Option II:

With option one,You must add an additional statement that changes the disabled property of the parent node,When there are more places to modify,Is more troublesome,And it does not conform to the general code logic,There is redundant code.Is there any more concise way?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 rather set it through the attributes in the input attributes.Changed the HTML content of the checkbox output to the client, as follows:

<input type="checkbox" name="chkblog" disabled="disabled" />
<label for="chkblog">http://owen-zhang.cnblogs.com</label>

The previously "redundant" parent nodes are now gone.

  • Previous C ++ structure definition and initialization and variable reference
  • Next jQuery full screen picture carousel effect with progress bar code sharing