HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM入力ボタンのdisabledプロパティの使い方を徹底解説

HTML DOM の disabled プロパティは、HTML 内にある入力ボタン（input type="button"）の disabled 属性の値を取得および変更するための機能です。このプロパティを使うことで、JavaScript から動的にボタンを無効化（クリック不可）したり、再度有効化したりすることができます。

構文（Syntax）

disabled プロパティの基本的な構文は以下のとおりです。

1. 現在の値を取得する場合

object.disabled

2. 値を変更（設定）する場合

object.disabled = true|false

true を設定するとボタンは無効化され、false を設定すると有効化されます。

サンプルコード

ここで、disabled プロパティの実際の使用例を見てみましょう。以下の例では、ボタンをクリックするとそのボタン自身が無効化され、メッセージが表示されます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM disabled Property</title>
<style>
    body{
        text-align:center;
    }
    .btn{
        display:block;
        margin:1rem auto;
        background-color:#db133a;
        color:#fff;
        border:1px solid #db133a;
        padding:0.5rem;
        border-radius:50px;
        width:80%;
    }
    .show-message{
        font-weight:bold;
        font-size:1.4rem;
        color:#ffc107;
    }
</style>
</head>
<body>
<h1>disabled Property Example</h1>
<input type="button" onclick="disableMe()" class="btn" value="Click me to Disable me">
<div class="show-message"></div>
<script>
    function disableMe() {
        var btn= document.querySelector(".btn");
        btn.disabled = true;
        document.querySelector(".show-message").innerHTML="Previously I'm enabled but now I'm disabled";
    }
</script>
</body>
</html>

実行結果（Output）

上記のコードを実行すると、次のような出力が得られます。

HTML DOM入力ボタンのdisabledプロパティの使い方を徹底解説

初期状態では赤いボタンが有効になっており、クリックすることができます。次に、「Click me to Disable me」ボタンをクリックしてみましょう。

HTML DOM入力ボタンのdisabledプロパティの使い方を徹底解説

ボタンがクリックされると、disabled プロパティに true が設定されるためボタンは無効化され、それ以降はクリックできなくなります。同時に、画面には「以前は有効だったが現在は無効である」という旨のメッセージが黄色い文字で表示されます。

まとめ

disabled プロパティは、フォーム送信の二重防止や、特定の条件が満たされるまでボタン操作を制限したい場合など、実用的な場面でよく活用されます。true / false の切り替えだけで簡単にボタンの有効・無効を制御できるため、初心者の方でもすぐに使いこなせるでしょう。

  1. HTML DOM Input Text disabledプロパティの使い方を徹底解説

    HTML DOM の Input Text disabled プロパティは、テキストフィールドを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されるプロパティです。値にはブール型（true / false）を指定し、true は「要素を無効にする」、false は「要素を有効のままにする」ことを意味します。デフォルト値は false です。disabled プロパティが true に設定されたテキストフィールドは、グレーアウトして表示され、ユーザーによるクリックや入力操作を受け付けなくなります。フォームの一時的な入力禁止や、特定の条件を満たすまで入力欄をロックしたい場合な

  2. HTML DOM Input リセットボタンの disabled プロパティの使い方を解説

    HTML DOM の Input Reset オブジェクトが持つ disabled プロパティは、フォーム内のリセットボタンを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されます。このプロパティはブール値（true / false）を受け取り、true を設定するとリセットボタンが無効になり、false であれば有効な状態を保ちます。デフォルト値は false です。disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。構文disabled