溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery如何讓checkbox只讀

發(fā)布時(shí)間：2022-07-26 10:05:37 來源：億速云 閱讀：197 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下jquery如何讓checkbox只讀的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

兩種只讀的方法：1、使用attr()給復(fù)選框添加disabled屬性，語法“$("input[type='checkbox']").attr("disabled",true);”；2、使用click()設(shè)置復(fù)選框點(diǎn)擊時(shí)不進(jìn)行checkbox狀態(tài)改變，語法“$("input[type='checkbox']").click(function(){return false;})”。

jquery如何讓checkbox只讀

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

提到只讀，很容易想到使用readonly屬性，但是對(duì)于復(fù)選框（checkbox）來說，這個(gè)屬性和期望得到的效果是有差別的。原因在于readonly屬性關(guān)聯(lián)的是頁(yè)面元素的value屬性(例如textbox，設(shè)置了readonly就不能修改輸入框的文本內(nèi)容)，而復(fù)選框的勾選/取消并不改變其value屬性，改變的只是一個(gè)checked狀態(tài)。所以對(duì)于checkbox來說，設(shè)置了readonly，仍然是可以勾選/取消的。

<input type="checkbox" readonly>option a<br>
<input type="checkbox" readonly>option b<br>
<input type="checkbox" readonly>option c<br>

jquery如何讓checkbox只讀

但和readonly類似的，還有一個(gè)disabled屬性，這個(gè)屬性的作用是設(shè)置頁(yè)面元素為不可用，即不可進(jìn)行任何交互操作(包括不可修改value屬性、不可修改checked狀態(tài)等)。

<input type="checkbox" disabled>option a<br>
<input type="checkbox" disabled>option b<br>
<input type="checkbox" disabled>option c<br>

jquery如何讓checkbox只讀

方法1：

而在jquery中，可以使用attr()給復(fù)選框（checkbox）添加disabled屬性

<!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[type='checkbox']").attr("disabled", true);
				});
			});
		</script>
	</head>

	<body>
		<input type="checkbox">option a<br>
		<input type="checkbox">option b<br>
		<input type="checkbox">option c<br>
		<br>
		<button>讓復(fù)選框只讀</button>
	</body>
</html>

jquery如何讓checkbox只讀

方法2：

如果使用disabled=“disabled”屬性的話，會(huì)讓checkbox變成灰色的，用戶可能會(huì)反感效果，也可以設(shè)置復(fù)選框（checkbox）點(diǎn)擊時(shí)不進(jìn)行狀態(tài)改變。

$(document).ready(function() {
	$("button").click(function() {
		$("input[type='checkbox']").click(
		function(){return false;}
		);
	});
});

jquery如何讓checkbox只讀

以上就是“jquery如何讓checkbox只讀”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手