[jQuery]Edgeだとpropでチェックボックス操作ができたりできなかったりするのだが。。。

インターネット上にあふれる情報によると、「チェックボックスのオンオフは attr ではなく prop を使うべし！」の声が多いように思います。

しかし、今回おっさんは、Edge でチェックボックスをオンにしようとしてもオンにならない現象に悩まされました。

Edge で jQuery の prop が動かない

Edge でチェックボックスがオンになったりならなかったりするサンプルは次のようなな簡単なものです。

HTTP + Javascript

<!-- チェックボックス -->
<input id="chk1" type="checkbox"> お前にチェックイ～～～～ン！

<script>
    // チェックボックスをオンにする
    $("#chk1").prop('checked', true);
    // オンだと認識されている
    if($("#chk1").prop('checked')) {
        console.log("true"); // true が出力される
    }
</script>

上記のコメントにもあるようにブラウザ（Edge）ではチェックボックスがオンになったと思っているようなのですが、実際の画面にはチェックボックスがつく場合もあれば、つかない場合もあります。

さて、困りました。(´・ω・｀)

対策

対策といっても大したことはしていませんが、今回は、HTML のほうに属性を最初からつけて出力するようにするか、

<!-- サーバ側でチェックを入れてしまう -->
<input id="chk1" type="checkbox" cheked="checked"> お前にチェックイ～～～～ン！

prop ではなく attr でチェックボックスをつけてしまうかでファイナルアンサーとなりそうです。

あらあら。世の意見とは真逆なような・・・

    // チェックボックスをオンにする
    $("#chk1").attr('checked', 'checked');

そういえば、2019新型コロナウイルスの影響で、確定申告の期限が1か月延長されるようですね。確定申告のために新Edgeブラウザの配信が4月以降になっていたと思うのですが、こちらも1か月延期されるんですかね。

確定申告のE-Tax(?)システムは IE11 と Edge のみがサポートだそうですが、新Edge へのアップデートで動かないとか。。。国家権力おそるべしです。ブラウザに振り回される側の人間としてはなんて羨ましいことか。