iPentec.com  /  Doc  /  C#  /  ASP.NET

目次

ラジオボタンを切り替えたタイミングでテキストボックスを有効にする - ラジオボタン選択変更時にJavaScriptを実行する - ASP.NET

ASP.NETでラジオボタンのチェックを切り替えたタイミングでテキストボックスを有効にしたいことがあります。
この記事ではASP.NETのラジオボタンを使用してチェック選択切り替え時にテキストボックスの有効、無効を切り替えるコードを紹介します。

概要

ラジオボタンのチェックの検出はUpdatePanelを利用してもできないため、JavaScriptのonclickイベントを直接を用います。RadioButtonはButtonと違い、ClientScriptプロパティがないため、Attributes.Add()メソッドを用いて直接属性を追加します。

サンプルプログラム

UI

下図のUIを作成します。RadioButtonを2つ、TextBoxを1つ配置します。


aspxファイルのコードは以下になります。Headタグ内にJavaScriptのコードを記述します。また、RadioButtonのGroupNameやデフォルトでチェックを入れるためのcheckedプロパティ等を編集します。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
  Inherits="RadioButtonClick.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function setTextbox(value) {
      document.forms.form1.TextBox1.disabled = value;
    }

    window.onload = function onLoad() {
      setTextbox(true);
    }
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div>
        <asp:RadioButton ID="RadioButton_Default" runat="server" Text="デフォルト値" Checked="True" GroupName="Group01" />
        <asp:RadioButton ID="RadioButton_Custom" runat="server" Text="カスタム値" GroupName="Group01" />
      </div>
      <div><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
    </div>
    </form>
</body>
</html>

解説

下記のJavaScriptにおいて、setTextbox関数では引数に与えた値をTextBoxのdisabledプロパティに設定しています。引数がtrueであれば、Disabledが"true"となり、テキストボックスは無効状態になります。
また、window.onload()において、ページロード時に実行されるスクリプトを記述できます。今回の例では、ラジオボタンのデフォルトのチェック位置ではテキストボックスを無効にするため、ページ表示時には、引数にtrueを与えてsetTextbox()関数を呼び出します。
  <script type="text/javascript">
    function setTextbox(value) {
      document.forms.form1.TextBox1.disabled = value;
    }

    window.onload = function onLoad() {
      setTextbox(true);
    }
  </script>

コード

下記のコードを記述します。Loadイベントのみの実装です。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace RadioButtonClick
{
  public partial class WebForm1 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      RadioButton_Default.Attributes.Add("onClick", "setTextbox(true);");
      RadioButton_Custom.Attributes.Add("onClick", "setTextbox(false);");
    }
  }
}

解説

  RadioButton_Default.Attributes.Add("onClick", "setTextbox(true);");
  RadioButton_Custom.Attributes.Add("onClick", "setTextbox(false);");
上記コードにより、RadioButtonのタグに onClick属性を追加しています。onClickの値は第二引数に与えた値になります。
RadioButton_DefaultのRadioButtonのタグには onClick="setTextbox(true);" が追加され、RadioButton_CustomuのRadioButtonのタグには onClick="setTextbox(false);"が追加されます。

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。テキストボックスは無効になっています。


[カスタム値]ラジオボタンをクリックします。クリックしラジオボタンのチェックが変更されるとテキストボックスが有効になります。


テキストボックスが有効になると、テキストボックスに入力ができるようになります。


再度 [デフォルト値]ラジオボタンにチェックをすると、テキストボックスが無効になります。

Webブラウザに返されるHTML

Webブラウザに返されるHTMLは下記になります。(VIEWSTATEの値は省略しています。)
ASP.NETのRadioButtonコントロールを表しているinputタグ内にonclick属性が追記されていることが確認できます。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>
  <script type="text/javascript">
    function setTextbox(value) {
      document.forms.form1.TextBox1.disabled = value;
    }

    window.onload = function onLoad() {
      setTextbox(true);
    }
  </script>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="(VIEWSTATEの値)" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="(EVENTVALIDATIONの値)" />
</div>
    <div>
      <div>
        <input id="RadioButton_Default" type="radio" name="Group01" value="RadioButton_Default" checked="checked" onclick="setTextbox(true);" /><label for="RadioButton_Default">デフォルト値</label>
        <input id="RadioButton_Custom" type="radio" name="Group01" value="RadioButton_Custom" onclick="setTextbox(false);" /><label for="RadioButton_Custom">カスタム値</label>
      </div>
      <div><input name="TextBox1" type="text" id="TextBox1" /></div>
    </div>
    </form>
</body>
</html>

補足：ポストバック等でラジオボタンのデフォルトの位置が変わる場合

ポストバックやパラメータなどで、ページ表示時のラジオボタンの選択位置が変わる場合、上記のコードではテキストボックスを常に無効にするため、テキストボックスを有効にするラジオボタンが選択されている場合でも、テキストボックスが無効になってしまいます。これを避けるためには下記のコードにします。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
  Inherits="RadioButtonClick.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function setTextbox(value) {
      if (value == true && document.forms.form1.RadioButton_Custom.checked == true) {
        return;
      }
      else{ 
        document.forms.form1.TextBox1.disabled = value;
      }
    }

    window.onload = function onLoad() {
      setTextbox(true);
    }
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div>
        <asp:RadioButton ID="RadioButton_Default" runat="server" Text="デフォルト値" Checked="True" GroupName="Group01" />
        <asp:RadioButton ID="RadioButton_Custom" runat="server" Text="カスタム値" GroupName="Group01" />
      </div>
      <div><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
    </div>
    </form>
</body>
</html>

解説

function setTextbox(value) {
  if (value == true && document.forms.form1.RadioButton_Custom.checked == true) {
    return;
  }
  else{ 
    document.forms.form1.TextBox1.disabled = value;
  }
}
ラジオボタンの「カスタム」が選択されている状況で、disabledプロパティをfalseに設定する場合は処理をブロックします。

このページのキーワード
  • ラジオボタンを切り替えたタイミングでテキストボックスを有効にする - ラジオボタン選択変更時にJSを実行する
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2014-09-01

関連するページ

ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.