jquery如何把input變?yōu)橹蛔x狀態(tài)

發(fā)布時(shí)間：2022-06-10 09:34:09 來源：億速云閱讀：579 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“jquery如何把input變?yōu)橹蛔x狀態(tài)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

兩種實(shí)現(xiàn)方法：1、使用attr()給input元素添加readonly屬性，并將屬性值設(shè)置為“readonly”，語法“$("input").attr("readonly","readonly");”。2、使用prop()給input元素添加readonly屬性，并將屬性值設(shè)置為“true”，語法“$("input").prop("readonly",true);”。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

想要把input變?yōu)橹蛔x狀態(tài)，只需給input元素添加只讀屬性（readonly）即可。

因此，使用jquery把input變?yōu)橹蛔x狀態(tài)，就轉(zhuǎn)換為使用jquery給input元素添加readonly屬性。

有以下兩種實(shí)現(xiàn)方法：

使用attr()
使用prop()

1、使用attr()設(shè)置input元素只讀狀態(tài)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").attr("readonly","readonly");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>給input添加只讀屬性</button>
	</body>
</html>

jquery如何把input變?yōu)橹蛔x狀態(tài)

2、使用prop()設(shè)置input元素只讀狀態(tài)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").prop("readonly",true);
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>給input添加只讀屬性</button>
	</body>
</html>

jquery如何把input變?yōu)橹蛔x狀態(tài)

說明：

其實(shí)，prop() 方法和 attr() 方法相似，都是用來獲取或設(shè)置元素的 HTML 屬性的，不過兩者也有著本質(zhì)上的區(qū)別。

jQuery 官方建議：具有 true 和 false 這兩種取值的屬性，如 checked、selected 和 disabled 等，建議使用 prop() 方法來操作，而其他的屬性都建議使用 attr() 方法來操作。

“jquery如何把input變?yōu)橹蛔x狀態(tài)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

jquery如何把input變?yōu)橹蛔x狀態(tài)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽