ASP.NET CheckBoxやRadioButtonでデータ属性を使用するときの注意点
ASP.NETでCheckBoxやRadioButtonでデータ属性を使用するときは注意が必要です。
例えば以下のチェックボックスのコントロールを定義します。
<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>