jQuery 禁用和啟用輸入
Sheeraz Gul
2023年1月30日
2022年7月18日
啟用和禁用輸入欄位是使用 jQuery 的簡單操作。本教程演示如何禁用或啟用 jQuery 中的輸入欄位。
jQuery 禁用輸入
prop() 方法可以使用 jQuery 禁用輸入。此方法的語法如下所示。
prop("disabled", true)
它有兩個引數，值 disabled，設定為 true。讓我們嘗試一個 prop() 方法的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Enable Input with jQuery</title>
<style>
label {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".disable").click(function(){
if($(this).prop("checked") == true){
$('form input[type="text"]').prop("disabled", true);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="checkbox" class="disable"> Check the box to disable the input fields below</label>
<label>Name: <input type="text" name="username"></label>
<label>ID: <input type="text" name="username"></label>
<label>Address: <input type="text" name="username"></label>
</form>
</body>
</html>
一旦我們選中該框，上面的程式碼將禁用輸入。見輸出：
jQuery 啟用輸入
同樣，prop 方法也用於啟用 jQuery 中的輸入。啟用輸入的語法將是：
prop("disabled", false)
其中引數 true 將更改為 false，讓我們嘗試一個示例來啟用輸入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Enable Input with jQuery</title>
<style>
label {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('form input[type="text"]').prop("disabled", true);
$(".disable").click(function(){
if($(this).prop("checked") == true){
$('form input[type="text"]').prop("disabled", false);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="checkbox" class="disable"> Check the box to enable the input fields below</label>
<label>Name: <input type="text" name="username"></label>
<label>ID: <input type="text" name="username"></label>
<label>Address: <input type="text" name="username"></label>
</form>
</body>
</html>
上面的程式碼首先禁用所有欄位，然後通過選中該框啟用它們。見輸出：
Author: Sheeraz Gul
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook