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

HTML DOM 入力チェックボックスの disabled プロパティとは？使い方を徹底解説

HTML DOM の Input Checkbox（チェックボックス）の disabled プロパティは、チェックボックスを有効にするか無効にするかを設定・取得するためのプロパティです。この記事では、基本的な構文から実際のコード例まで、初心者にもわかりやすく解説します。

基本情報

disabled プロパティを使うことで、JavaScript から動的にチェックボックスの操作可否を切り替えることができます。たとえば、特定の条件が満たされるまでフォームの入力を禁止したい場合などに活用できます。

構文

disabled プロパティの構文は以下の通りです。

値の取得（ブール値を返す）

inputCheckboxObject.disabled

値の設定（booleanValue を代入）

inputCheckboxObject.disabled = booleanValue

設定できるブール値

「booleanValue」には以下のいずれかの値を指定します。

booleanValue説明
trueチェックボックスが無効（disabled）であることを示します。
falseチェックボックスが無効でないこと、つまり有効であることを示します。これがデフォルト値です。

サンプルコード

ここでは、Input Checkbox の disabled プロパティを使った具体的な例を見てみましょう。初期状態ではすべての科目チェックボックスが無効になっており、ボタンをクリックすると有効化されます。

<!DOCTYPE html>
<html>
<head>
<title>学生情報フォーム</title>
</head>
<body>
<form>
<div>
<input id="fullname" placeholder="例：山田太郎" type="text" name="fullname">
</div>
<div>
生物学： <input class="category" type="checkbox" value="Biology" name="subject" disabled>
数学： <input class="category" type="checkbox" value="Mathematics" name="subject" disabled>
物理学： <input class="category" type="checkbox" value="Physics" name="subject" disabled>
心理学： <input class="category" type="checkbox" value="Psychology" name="subject" disabled>
</div>
</form>
<button onclick="enableCheckboxes()">科目を有効にする</button>
<script>
    function enableCheckboxes(){
        var enableCheckboxes = document.getElementsByClassName("category");
        for (var i = 0; i < enableCheckboxes.length; i++) {
            enableCheckboxes[i].disabled = false;
        }
    }
</script>
</body>
</html>

コードのポイント

  • 各チェックボックスには class="category" が指定されており、getElementsByClassName() で一括取得できます。
  • HTML 側で disabled 属性が付与されているため、初期状態ではすべてのチェックボックスが操作できません。
  • ボタンをクリックすると enableCheckboxes() 関数が実行され、ループ処理ですべてのチェックボックスの disabled を false に設定して有効化します。

実行結果

上記のコードを実行すると、次のような表示になります。

「科目を有効にする」ボタンをクリックする前：

HTML DOM 入力チェックボックスの disabled プロパティとは？使い方を徹底解説

「科目を有効にする」ボタンをクリックした後：

HTML DOM 入力チェックボックスの disabled プロパティとは？使い方を徹底解説

まとめ

disabled プロパティは、チェックボックスの有効／無効を簡単に制御できる便利な機能です。true を設定すれば無効化、false を設定すれば有効化でき、デフォルト値は false です。フォームの入力条件を動的に制御したい場面でぜひ活用してみてください。

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

    HTML DOM の Input Password disabled プロパティは、パスワード入力フィールドを無効化するかどうかを設定・取得するために使用されるプロパティです。真偽値（boolean）を扱い、true は要素を無効にすること、false は有効であることを表します。デフォルト値は false です。無効化された要素は自動的にグレーアウト表示され、クリックやキーボード操作を受け付けなくなります。 構文 disabled プロパティの設定は、以下の構文で行います。 passwordObject.disabled = true|false; true を指定するとパスワードフィール

  2. HTML DOM Input Search の disabled プロパティとは？使い方を解説

    disabled プロパティとはHTML DOM の Input Search disabled プロパティは、検索フィールド（<input type=search>）を無効化するかどうかを設定、または取得するためのプロパティです。ブール値（true / false）を受け取り、true を指定すると要素が無効になり、false を指定すると有効になります。デフォルト値は false です。無効化された検索フィールドは自動的にグレーアウト表示され、クリックや文字入力など、ユーザーによる一切の操作が受け付けられなくなります。構文disabled プロパティを設定する構文は以下のとおり