getElementByIdについて

Question

環境
OS windows10
Visual Studio2019
.NET Framework 4.8

ASP.NETでWeb Formsを作成しています。
javasciptを使用し、テキストボックスに変化があれば、ドロップダウンリストを
非活性にするという処理を作りたいです。

下記のような記述をしているのですが、obj の値が null で帰ってきてしまいます。

 <asp:DropDownList  ID="ListboxSelect"   AutoPostBack="true"  OnSelectedIndexChanged ="ListboxSelect" runat="server"/>

        <script type="text/javascript">
		function change() {
                var obj = document.getElementById("ListboxSelect");
                alert(obj);
	        obj.Enabled = false;
		}
</script>

<asp:TextBox ID="txt"  runat="server"  test="テスト" OnChange="change();" />

いろいろ調べたのですが、ページを読み込む前にJSを実行するとこのような現象が起きるらしいのですが、JSの発生タイミングは
ページ読み込み → テキストボックスが表示 → テキストボックスの値が変更　→　JS実行　となっているので、読み込むタイミング自体は問題ないかと思います。
https://qiita.com/kikuchiTakuya/items/c56c4b25e8b4d005dd8a

また、根本的な質問なのですが、ASP.NETで、画面上のドロップダウンリストをJSで非活性にできるのでしょうか。

よろしくお願いいたします。

Comments

[退会済みユーザー]

.NET Framework のバージョンを質問欄を編集して追記願います。

[m.ts10806]

念のため、ブラウザに表示された際のHTMLソースも提示してください。

[mimi77]

ご回答ありがとうございます。
情報を追加しました。

Answer 1

(1) document.getElementById("ListboxSelect") で取得できない理由

例えばマスターページなどの名前付きコンテナにサーバーコントロールが配置されると、html に変換された時の id とサーバーコントロールの ID は異なってきます。

例えば、質問者さんのコードの <asp:DropDownList ID="ListboxSelect" ...> がマスターページに配置されているとすると、それが html に変換されると .NET Framework 4.8 のデフォルトでは以下のようになります。マスターページの ContentPlaceHolder の ID が先頭に追加されています。

<select name="ctl00$MainContent$ListboxSelect" id="MainContent_ListboxSelect">

ASP.NET 4.0 以降では Control.ClientIDMode プロパティによってそれをコントロールできます。

Control.ClientIDMode プロパティ
https://docs.microsoft.com/ja-jp/dotnet/api/system.web.ui.control.clientidmode?view=netframework-4.8

例えば、<asp:DropDownList ID="ListboxSelect" ...> に ClientIDMode="Static" を追加すれば html に変換されたときの id は ID と同じ ListboxSelect になるので getElementById("ListboxSelect") で取得できます。

他には Matsumon0104 さんの回答にあるように <%= %> を使用する方法があります。これは ASP.NET プログラムから情報を最も簡単に表示するためのもので、<%= と %> 間に設定した ASP.NET プログラムの値がその部分の html ソースに埋め込まれます。

例えば、上のような ClientIDMode は設定しない場合、質問者さんのコードの例で document.getElementById("<%=ListboxSelect.ClientID%>") と変更すれば、それが html ソースに変換されると、

document.getElementById("MainContent_ListboxSelect")

となるので目的の要素を取得できます。

(2) obj.Enabled = false; が動かない理由

サーバーコントロールではないのだから obj.Enabled = false; というのは無しです。以下のようにしてみてください。

obj.disabled = true;

Comments

[mimi77]

ご回答ありがとうございます。
無事処理が動きました。
obj.disabled = true;　でないと非活性にならないのですね。勉強になりました。
Matsumon0104さんも回答ありがとうございました。
かなり困っていたので本当に助かりました。

Answer 2

javascriptで利用するIDは「サーバーコントロールのプログラムID」ではなく、「HTML マークアップのコントロール ID」です。

DropDownList

var obj = document.getElementById("<%=コントロール名.ClientID%>");

【ASP.NET】JavaScript側でコントロールのIDを取得する方法

Comments

[mimi77]

ご回答ありがとうございます。

var obj = document.getElementById("<%=ListboxSelect.ClientID%>").value;
alert(obj);
obj.Enabled = false;

と記載したところ、アラートには 0 が表示されました。
ドロップダウンリストの最初のValue値が 0 なためそちらが表示されている状態です。

試しにラジオボタンで試したところ、コントロールID名がアラートに表示されたのですが、非活性の処理が動作しませんでした。指定方法等が間違っているのでしょうか。

var obj1 = document.getElementById("<%=RadioButton.ClientID%>").value;
alert(obj1);
obj1.Enabled = false;

[Matsumon0104]

valueのプロパティを設定しようとしているからです。

obj1の中身は下記
document.getElementById("<%=RadioButton.ClientID%>").value

HTMLElementに対して処理をしなくてはいけません。
下記まででHTMLElementが取得されています。
document.getElementById("<%=RadioButton.ClientID%>")

また、jsの場合で非活性にする場合は「disabled」です。
ですので、非活性にする場合は

document.getElementById("<%=RadioButton.ClientID%>").disabled = true