Disable Element In HTML
disabledattribute
ThisBooleanattributeindicatesthattheformcontrolisnotavailableforinteraction.Inparticular,theclickeventwillnotbedispatchedondisabledcontrols.Also,adisabledcontrol'svalueisn'tsubmittedwiththeform.
Thisattributeisignoredifthevalueofthetypeattributeishidden.
eg.
elem.setAttribute("disabled","disabled");
elem.removeAttribute("disabled");
note:
InHTMLbooleanattributessuchasdisabledandreadonlycanonlylegallytakethenameoftheattribute.
eg.disabled="disabled"readonly="readonly"
Mostbrowsershoweveracceptanyvaluefortheattributeasbeingintheaffimative.
Sothefollowingareequivalent:
disabled="disabled"
disabled
disabled="true"
disabled="false"
disabled="unknown"
disabled="23"
disabled="no"
Ifyouwanttoremoveadisabledattributeinscript,usetheremoveAttribute()methodorusetheorigindomproperty.
disabledproperty
eg.
if(elem.disabled){
elem.disabled=false;
}else{
elem.disabled=true;
}
disableelementonlinedemo
<!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>disableelementwithjQueryonlinedemo
<!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:
disabledattribute|disabledproperty
disabled-false-doesn-enable