jQueryを使ってウェブページの要素を非活性化(無効化)する方法について解説します。
フォームの入力欄を非活性化する
フォームの入力欄(<input>
要素)を非活性化するには、
prop
メソッドを使用してdisabled
プロパティをtrue
に設定します。
htmlコードをコピーする<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで要素を非活性化する例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="text" id="myInput" value="ここに入力してください">
<button type="button" id="disableButton">非活性化する</button>
</form>
<script>
$(document).ready(function() {
$('#disableButton').click(function() {
$('#myInput').prop('disabled', true);
});
});
</script>
</body>
</html>
この例では、ページが読み込まれたときに、ボタン(#disableButton
)がクリックされると、
入力欄(#myInput
)が非活性化されます。
非活性化を解除する
非活性化を解除するには、prop
メソッドを使ってdisabled
プロパティをfalse
に設定します。
htmlコードをコピーする<script>
$(document).ready(function() {
$('#enableButton').click(function() {
$('#myInput').prop('disabled', false);
});
});
</script>
このようにして、非活性化された要素を再度活性化することができます。
まとめ
今回は、jQueryのprop
メソッドを使って要素を非活性化する方法を紹介しました。
prop
メソッドを使用することで、disabled
属性を操作する際に便利です。
是非参考にしてください。
コメント