jQuery|要素を活性化・非活性化にする方法【初心者向け】

jQuery

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属性を操作する際に便利です。

是非参考にしてください。

コメント

タイトルとURLをコピーしました