Disable Element In HTML
程序员文章站
2022-05-16 16:21:45
...
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
disable element with jQuery online demo
ref:
disabled attribute | disabled property
disabled-false-doesn-enable
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
上一篇： 今天快下班的时候女友打电话
下一篇： Android视频录制－－屏幕录制