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

HTML DOM入力レンジ（range）のdisabledプロパティの使い方を徹底解説

HTML DOM Input Range disabledプロパティとは

HTML DOMのInput Range（レンジスライダー）におけるdisabledプロパティは、スライダーを無効化するかどうかを設定または取得するために使用されるプロパティです。

このプロパティにはブール値（真偽値）を指定します。trueを設定するとスライダーは無効化され、falseを設定すると有効になります。デフォルト値はfalseです。

なお、無効化された要素はグレーアウトして表示され、ユーザーはクリックやドラッグなどの操作を行うことができなくなります。

構文（Syntax）

disabledプロパティを設定する場合の構文は以下のとおりです。

rangeObject.disabled = true|false;

true＝スライダーを無効化、false＝スライダーを有効化（デフォルト値）という意味になります。

サンプルコード

ここでは、Input Rangeのdisabledプロパティを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range disabled Property</h1>
<form>
<input type="range" id="RANGE1" name="VOL">
</form>
<p>下のDISABLEボタンをクリックすると、上のスライダーが無効化されます</p>
<button type="button" onclick="disableRange()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableRange() {
        document.getElementById("RANGE1").disabled=true;
        document.getElementById("Sample").innerHTML = "The range slider is now disabled";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM入力レンジ（range）のdisabledプロパティの使い方を徹底解説

この状態でDISABLEボタンをクリックすると、スライダーは動かせなくなります。

HTML DOM入力レンジ（range）のdisabledプロパティの使い方を徹底解説

コードの解説

上記のサンプルコードでは、以下のような処理が行われています。

1. レンジスライダーの作成

まず、フォームの中にtype="range"、id="RANGE1"、name="VOL"を持つ入力フィールドを作成しています。

<form>
<input type="range" id="RANGE1" name="VOL">
</form>

2. DISABLEボタンの作成

次に、ユーザーがクリックするとdisableRange()メソッドを実行するDISABLEボタンを作成します。

<button type="button" onclick="disableRange()">DISABLE</button>

3. disableRange()メソッドの処理内容

disableRange()メソッドでは、getElementById()メソッドを使ってtype属性がrangeの入力要素を取得し、そのdisabledプロパティをtrueに設定しています。

これにより、スライダーは固定され、ユーザーはそれ以上スライダーを操作できなくなります。

function disableRange() {
    document.getElementById("RANGE1").disabled=true;
    document.getElementById("Sample").innerHTML = "The range slider is now disabled";
}

同時に、idが「Sample」の段落要素にメッセージを出力することで、スライダーが無効化されたことをユーザーに視覚的に伝えています。

まとめ

disabledプロパティを使えば、JavaScriptから簡単にレンジスライダーの有効・無効を切り替えることができます。フォームの入力制御や、特定の条件を満たすまで操作をロックしたい場合など、さまざまな場面で活用できる便利なプロパティなので、ぜひ覚えておきましょう。

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

    HTML DOMのInput Range valueプロパティは、type=rangeが指定されたinput要素に関連するプロパティです。スライダー（レンジ）コントロールのvalue属性の値を取得したり、新しい値を設定したりするために使用されます。value属性には初期値（デフォルト値）や、ユーザーがスライダーをドラッグして設定した値が格納されます。構文valueプロパティの構文は以下の通りです。値を設定する場合rangeObject.value = text;ここで「text」には、レンジスライダーコントロールに設定したい値を指定します。サンプルコードそれでは、Input Rangeのval

  2. HTML DOM Input Range typeプロパティの使い方を徹底解説

    HTML DOM Input Range typeプロパティとはHTML DOMのInput Range typeプロパティは、type=rangeが指定されたinput要素に関連付けられたプロパティです。range型の入力フィールドに対してこのプロパティを参照すると、常に文字列「range」を返します。range型はスライダー形式の入力コントロールを表す要素であり、音量調整や評価値の選択などでよく使われます。JavaScript側で要素の種類を動的に確認したい場合に、このtypeプロパティが役立ちます。構文range typeプロパティの構文は以下の通りです。rangeObject.type