jQuery の入力の無効化と有効化
Sheeraz Gul
2024年2月15日
入力フィールドを有効または無効にするのは、jQuery を使用した簡単な操作です。このチュートリアルでは、jQuery の入力フィールドを無効または有効にする方法を示します。
jQuery で入力を無効にする
prop() メソッドは、jQuery を使用して入力を無効にすることができます。このメソッドの構文を以下に示します。
prop('disabled', true)
true に設定された値 disabled の 2つのパラメーターを取ります。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>
上記のコードは、最初にすべてのフィールドを無効にし、次にチェックボックスをオンにして有効にします。出力を参照してください：
著者： 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