How to determine whether an element is read-only in jquery-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to determine whether an element is read-only in jquery

青灯夜游

Sep 13, 2022 pm 06:22 PM

jquery

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.

How to determine whether an element is read-only in jquery

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>

How to determine whether an element is read-only in jquery

[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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn