Home >Web Front-end >Front-end Q&A >How to determine whether an element is read-only in jquery
How to determine whether an element is read-only in jquery
- 青灯夜游Original
- 2022-09-13 18:22:402600browse
Judgment steps: 1. Use attr() to get the value of the readonly attribute in the specified element, the syntax is "$("selector).attr("readonly")"; 2. Determine whether the value of the readonly attribute is "readonly", the syntax "attribute value == "readonly"", if the attribute value is "readonly", the element is read-only, otherwise the element is not read-only.
The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.
HTML read-only status
Whether the element is read-only , is controlled by the readonly attribute.
The readonly attribute is used to specify that the input field is read-only.
The read-only field is cannot be modified. However, the user can still use the tab key to switch to the field, and can also select or copy its text.
The readonly attribute prevents the user from modifying the value until a certain until some conditions are met (such as a checkbox being checked). Then, you need to use JavaScript to eliminate the readonly value and switch the input field to an editable state.
The readonly attribute can be used with or used together.
jquery determines whether the element is read-only
In jquery, you can determine whether an element is read-only by checking the value of the readonly attribute
When the value of the readonly attribute is "readonly", the element is read-only ;
Implementation steps:
Step 1: Use attr() to get the value of the readonly attribute in the specified element
attr() method can return the specified attribute value of the selected element
$("选择器).attr("readonly")Step 2: Determine whether the value of the readonly attribute is "readonly"
The attribute value is "readonly", the element is read-only
The attribute value is not "readonly", the element is not read-only
if(属性值=="readonly"){
console.log("元素只读");
}else{
console.log("元素不只读");
}Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var a = $("input").attr("readonly");
if (a == "readonly") {
console.log("input元素只读");
} else {
console.log("input元素不只读");
}
var b = $("textarea").attr("readonly");
if (b == "readonly") {
console.log("textarea元素只读");
} else {
console.log("textarea元素不只读");
}
});
});
</script>
</head>
<body>
<input type="text" value="hello" readonly="readonly" /><br /><br />
<textarea></textarea><br /><br />
<button>元素是否只读</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video 】
The above is the detailed content of How to determine whether an element is read-only in jquery. For more information, please follow other related articles on the PHP Chinese website!