zukucode
主にWEB関連の情報を技術メモとして発信しています。

ASP.NET CheckBoxやRadioButtonでデータ属性を使用するときの注意点

ASP.NETCheckBoxRadioButtonでデータ属性を使用するときは注意が必要です。

例えば以下のチェックボックスのコントロールを定義します。

<asp:CheckBox ID="chk1" Text="選択" runat="server" />

サーバー処理で以下のようにチェックボックスのコントロールに対してデータ属性を設定します。

chk1.Attributes.Add("data-foo", "sample")

このようにして出力したコントロールをJavaScriptで以下のように取得しようとしてもうまくいきません。

document.getElementById('chk1').getAttribute('data-foo');

原因

実際に出力(レスポンス)されるhtmlを確認すると以下のようになっています。

<span data-foo="sample">
        <input name="chk1" id="chk1" type="checkbox"><label for="chk1">選択</label>
</span>

チェックボックスのコントロールがspanタグに囲われて出力され、サーバー処理で設定したデータ属性はspanタグに対して設定されてしまっています。

対処法

JavaScriptでアクセスするときは以下のようにチェックボックスのコントロールの親要素を見るようにします。

document.getElementById('chk1').parentElement.getAttribute('data-foo');

またはInputAttributesを使用して以下のようにデータ属性を指定すればコントロールに対してデータ属性が設定されます。

chk1.InputAttributes.Add("data-foo", "sample")
<input id="chk1" type="checkbox" name="chk1" data-foo="sample" /><label for="chk1">選択</label>


関連記事