Disable Element In HTML

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

你可能感兴趣的:(JavaScript,html,dom,Enable,disable)