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

HTML DOMのInput Radio disabledプロパティとは？使い方をわかりやすく解説

disabledプロパティとは

HTML DOMのInput Radio disabledプロパティは、ラジオボタンを無効化するかどうかを設定、または現在の状態を取得するために使用されるプロパティです。ブール値（true / false）で状態を表し、trueなら要素を無効化、falseなら有効のままとなります。デフォルト値はfalseです。

disabledが設定された要素はグレーアウトして表示され、ユーザーがクリックして選択することはできません。

構文

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

radioObject.disabled = true|false;

trueを指定するとラジオボタンが無効になり、falseを指定すると無効化されません。初期値はfalseです。

サンプルコード

Input Radioのdisabledプロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input radio disabled Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>上のラジオボタンは、DISABLEボタンをクリックすると無効化されます</p>
<button type="button" onclick="disableRadio()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableRadio() {
        document.getElementById("Mango").disabled=true;
        document.getElementById("Sample").innerHTML = "ラジオボタンは無効になりました";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

HTML DOMのInput Radio disabledプロパティとは？使い方をわかりやすく解説

DABLEボタンをクリックすると、次のようになります。

HTML DOMのInput Radio disabledプロパティとは？使い方をわかりやすく解説

コードの解説

上記の例では、まずform要素の中に type="radio"、name="fruits"、id="Mango" を持つinput要素を作成しています。

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

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

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

disableRadio() メソッドでは、getElementById() メソッドを使って対象のラジオボタンを取得し、そのdisabledプロパティをtrueに設定しています。これによりラジオボタンはグレーアウトし、ユーザーはそれ以上操作できなくなります。あわせて、id="Sample" のp要素にメッセージを表示して、無効化されたことをユーザーに伝えています。

function disableRadio() {
    document.getElementById("Mango").disabled=true;
    document.getElementById("Sample").innerHTML = "ラジオボタンは無効になりました";
}

まとめ

disabledプロパティは、true / false のブール値を使ってラジオボタンの有効・無効を簡単に切り替えられる便利なプロパティです。値を読み取れば、現在ラジオボタンが無効化されているかどうか（trueなら無効）を確認することもできます。フォームの操作制限や条件に応じた入力制御など、さまざまな場面で活用できます。

  1. HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

    HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t

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

    HTML DOMのInput radio typeプロパティは、type=radioが設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。構文radio typeプロパティの基本構文は以下のとおりです。radioObject.typeサンプルコードここで、radio typeプロパティの具体的な使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>