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属性を操作する際に便利です。
是非参考にしてください。

コメント