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

【HTML DOM】fieldset要素のdisabledプロパティの使い方とサンプルコード

fieldsetのdisabledプロパティとは

HTML DOMのfieldset要素が持つdisabledプロパティは、そのfieldset内に含まれるフォーム部品をまとめて無効化するためのプロパティです。trueを設定すれば配下の要素がすべて無効になり、falseを設定すれば有効になります（初期状態は有効）。無効化された要素は多くのブラウザでグレー表示となり、ユーザーはクリックや文字入力を行えません。

基本構文

disabledプロパティに値を設定する場合は次のように記述します。

fieldsetObj.disabled = true|false

現在の設定値を取得する場合は以下のとおりです。

fieldsetObj.disabled

サンプルコード

それでは、fieldsetのdisabledプロパティの動作を確認できる具体例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function FieldDisable() {
        document.getElementById("FieldSet1").disabled = true;
    }
    function FieldEnable() {
        document.getElementById("FieldSet1").disabled = false;
    }
</script>
</head>
<body>
<h1>サンプルFORM</h1>
<form>
<fieldset id="FieldSet1">
<legend>ユーザーデータ：</legend>
名前：<input type="text"><br>
住所：<input type="text"><br>
年齢：<input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>
<p>Enableボタンでfieldsetを有効化し、Disableボタンで無効化できます</p>
</body>
</html>

実行結果

上記コードを実行すると、次のような画面が表示されます。

【HTML DOM】fieldset要素のdisabledプロパティの使い方とサンプルコード

[Disable]ボタンをクリックした場合は以下のようになります。

【HTML DOM】fieldset要素のdisabledプロパティの使い方とサンプルコード

コードの解説

まず、id属性に「FieldSet1」を設定した<fieldset>要素でフォーム内の項目をグループ化し、名前・住所・年齢の3つのテキスト入力欄を配置しています。

<form>
<fieldset id="FieldSet1">
<legend>ユーザーデータ：</legend>
名前：<input type="text"><br>
住所：<input type="text"><br>
年齢：<input type="text">
</fieldset>
</form>

続いて、「Enable」「Disable」の2つのボタンを作成し、それぞれクリック時にFieldEnable()関数とFieldDisable()関数が実行されるようにしています。

<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>

FieldDisable()関数はfieldsetのdisabledプロパティにtrueを、FieldEnable()関数はfalseをそれぞれ代入します。これにより、対象のfieldset内にあるすべての入力部品をワンクリックで無効化・有効化できる仕組みです。

function FieldDisable() {
    document.getElementById("FieldSet1").disabled = true;
}
function FieldEnable() {
    document.getElementById("FieldSet1").disabled = false;
}

応用のヒント

disabledプロパティは値の読み取りにも対応しているため、「現在fieldsetが無効かどうか」を条件分岐に利用することも可能です。利用規約への同意前に入力フォームをロックしたい場面や、二重送信を防止したい場面など、実務でも幅広く活用できます。

  1. HTML DOM Fieldset nameプロパティとは？使い方とサンプルコードを解説

    HTML DOM の Fieldset name プロパティは、<fieldset> 要素の name 属性値を取得または設定するために使用されます。name 属性は、フォーム送信後にデータを識別するだけでなく、JavaScript からフォーム要素を参照する場合にも役立ちます。 構文 Fieldset name プロパティを設定する場合の構文は以下の通りです。 fieldsetObject.name = name ここで指定する「name」は、フィールドセットに付与したい名前です。値を取得したい場合は、代入を行わずに fieldsetObject.name を参照します。 サ

  2. HTML DOM Textarea disabledプロパティの使い方とサンプルコード

    HTML DOM の Textarea disabled プロパティは、HTML ドキュメント内の textarea 要素が無効（disabled）状態かどうかを取得したり、設定したりするためのプロパティです。ユーザーの操作状況に応じてフォームの入力欄を一時的に使用不可にしたい場合などに活用できます。 構文 disabled プロパティの基本的な構文は以下の通りです。 1. disabled の値を取得する場合 object.disabled 2. disabled の値を設定する場合 object.disabled = true | false true を指定するとテキストエリアが無効化さ