こちらの記事ですが、コメントにて有識者による解説を頂けましたので、究極的な原因を知りたい方はそちらを参照してください。

始まりは自己紹介から

初めまして　あおげばにゃんこです。
最近JSにこなれ感を出しつつコード書いていた矢先に悲劇が起きましたので、ご報告です。

data属性に「""」がついてくる

普段はrailsで開発を行っているのですが、HTMLのdata属性にデータを入れておいて取り出そうとした際にある問題が生じました。

発生した問題は以下のとおりです。

<input type="checkbox" name="type" id="birthday" data-status=""2024-10-03"">

お気づきになりましたか？

謎の「""」がついてますよね？　
こいつはいったい何者なんだと
そう思うのが自然の摂理です。

今回はこちらの直接的な原因について記事を書きます。
※究極的な原因であるhtmlやrails,jsのことについては詳しく述べません

まずは我々が望む美しい理想形を確認してみましょう。

<input type="checkbox" name="type" id="birthday" data-status="2024-10-03">

いかがですか？
実に綺麗でしょう。

それでは再度自身の構造を確認してみましょう。

<input type="checkbox" name="type" id="birthday" data-status=""2024-10-03"">

汚いですね〜
1週間お風呂入ってないのかな？ってくらい汚いですよね？

さて、それではこちらの構造の元になったコードを見てみましょう。

 = check_box_tag 'type', 'birthday', false, id: "birthday", data: { status: birthday }

= check_box_tag 'type', 'happy', false, id: "happy", data: { status: "#{(@user.birthday )}" }

お気づきになりましたか？

そうです。上は剥き出しの変数のまま、下は式展開を使った文字列なのです。

つまり、data属性にはちゃんと文字列を渡してあげないとhtml側？がエスケープ処理を行い正しく認識されないのです！！！
(たぶん文字列)

つまりdata属性にrailsからデータを渡す場合はちゃんと文字列にしてあげることが重要なのです！

今回の記事が誰かの役に立てば幸いです。

この記事を書く前に色々調べてみたのですが、jQueryだとdata属性からデータを取得する際に勝手に型を変換してくれるそうです。
ソースについてはご自身で調べていただければと思います。