HTMLでラジオボタンを無効化する方法


HTMLでラジオボタンを無効化する方法はいくつかあります。以下にいくつかの方法を示します。

方法1: disabled属性を使用する方法 ラジオボタンを無効化するには、各ラジオボタンのinput要素にdisabled属性を追加します。disabled属性が設定されると、ユーザーはラジオボタンを選択できなくなります。

例:

<input type="radio" name="option" value="option1" disabled> オプション1<br>
<input type="radio" name="option" value="option2" disabled> オプション2<br>

方法2: JavaScriptを使用する方法 JavaScriptを使ってラジオボタンを無効化することもできます。以下はJavaScriptを使用した無効化の例です。

<script>
  document.getElementById("radioButton1").disabled = true;
  document.getElementById("radioButton2").disabled = true;
</script>
<input type="radio" id="radioButton1" name="option" value="option1"> オプション1<br>
<input type="radio" id="radioButton2" name="option" value="option2"> オプション2<br>

方法3: CSSを使用する方法 CSSを使用してラジオボタンを無効化することもできます。以下はCSSを使用した無効化の例です。

<style>
  .disabled-radio {
    pointer-events: none;
    opacity: 0.5;
  }
</style>
<input type="radio" class="disabled-radio" name="option" value="option1"> オプション1<br>
<input type="radio" class="disabled-radio" name="option" value="option2"> オプション2<br>

これらの方法を使用して、HTMLのラジオボタンを無効化することができます。必要に応じて、適切な方法を選択してください。