HOWTO · jQuery
jQuery の入力の無効化と有効化
このチュートリアルでは、jQuery での入力を無効および有効にする方法を示します。
このページの内容
入力フィールドを有効または無効にするのは、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>
上記のコードは、最初にすべてのフィールドを無効にし、次にチェックボックスをオンにして有効にします。出力を参照してください：
