`

Disable Element In HTML

htmlJavaScriptdisableenabledom 
阅读更多
disabled attribute
  This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.
This attribute is ignored if the value of the type attribute is hidden.
eg.
elem.setAttribute("disabled", "disabled");
elem.removeAttribute("disabled");

note:
  In HTML boolean attributes such as disabled and readonly can only legally take the name of the attribute.
eg. disabled="disabled" readonly="readonly"
Most browsers however accept any value for the attribute as being in the affimative.
So the following are equivalent:
disabled="disabled"
disabled
disabled="true"
disabled="false"
disabled="unknown"
disabled="23"
disabled="no"
If you want to remove a disabled attribute in script, use the removeAttribute() method or use the origin dom property.


disabled property
eg.
if (elem.disabled) {
                elem.disabled = false;
} else {
                elem.disabled = true;
}

disable element online demo 
<!DOCTYPE html>
<html>
<head>
  <title>disable element</title>
  <script>
  window.onload = function() {
      var lname = document.getElementById("lname");
      var fname =  document.getElementById("fname");
      lname.disabled = false;
      fname.disabled = true;
  }
  </script>
</head>
<body>
    
<form  action="#" method="get">
  <p>First name: <input id="fname" type="text" name="fname" /></p>
  <p>Last name: <input id="lname" type="text" name="lname"   /></p>
  <input type="submit" value="Submit" />
</form>

</body>
</html>



disable element with jQuery online demo 
<!DOCTYPE html>
<html>
<head>
    <title>disable element with jquery</title>
   <script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
  <script>
  jQuery(function ($) {
      var lname = $("#lname");
      var fname =  $("#fname");
      lname[0].disabled = false;
      fname[0].disabled = true;

      $("#change").click(function() {
          var t =  fname[0];
          if (t.disabled) {
              t.disabled = false;
          } else {
            t.disabled = true;  
          }
      });
  });

  
  </script>
	
</head>
<body>
    
<form  action="#" method="get">
  <p>First name: <input id="fname" type="text" name="fname" /></p>
  <p>Last name: <input id="lname" type="text" name="lname"   /></p>
  <input id="change" type="button" value="en/disable" />
</form>

</body>
</html>


ref:
disabled attribute | disabled property
disabled-false-doesn-enable
分享到：
| hibernate criteria can't cast to type
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics