【EC-CUBE2.13.3】商品規格登録の1行目コピー機能が正常に動作しないとき #EC-CUBE

「一行目のデータをコピーする」機能が正しく動いていない？

つい先日、EC-CUBEの現行最新バージョンの2.13.3をカスタマイズしていた時に気づいた現象。

「あれ？商品規格登録の画面の1行目コピーのヤツ、チェックボックスコピーできてなくない？」

コピー機能の処理を見てみる

一行目コピーの機能で、かつチェックボックスに関係ありそうな箇所はこの辺り。

data\Smarty\templates\product_class.tpl

// 1行目をコピーボタン
$('#copy_from_first').click(function() {
    var check = $('#check_0').attr('checked');
    $('input[id^=check_]').attr('checked', check);

    var product_code = $('#product_code_0').val();
    $('input[id^=product_code_]').val(product_code);

    var stock = $('#stock_0').val();
    $('input[id^=stock_]').val(stock);

    var stock_unlimited = $('#chk_stock_unlimited_0').attr('checked');
    $('input[id^=chk_stock_unlimited_]').each(function() {
        var checked = stock_unlimited;
        var index = $(this).attr('id').replace(/^chk_stock_unlimited_/ig, '');
        $(this).attr('checked', checked);
        if (checked) {
            $('#stock_' + index)
                .attr('readonly', true)
                .css('background-color', '<!--{$smarty.const.DISABLED_RGB}-->');
        } else {
            $('#stock_' + index)
                .attr('readonly', false)
                .css('background-color', '');
        }
    });

ざっと見た感じ、過去のEC-CUBEのソースと違いがあるようには見受けられない。
気になって公式のデモサイトも確認してみたが、そちらではちゃんとチェックボックスでも一行目コピーが正しく動いていた。
じゃあ、何が違うのか？

そういえば、とても大きな変更点がありました。
jQueryが2系にバージョンアップされてたんですよね！

attrが問題

どうもチェック状態を取得・設定しているattrが
jQueryのバージョンアップに伴い動作しなくなっていたみたいです。
attrは属性における値を取得するのですが、
この値が初期表示の時の属性だけ取得するみたいですね。
クリックしてチェックした時の属性は取得できないみたいです。

それでどう対策するのかというと
「attr」を「prop」に変更します。

propとはプロパティの真偽を取得します。
詳しいバージョンは調べきれていないですが
どうも最近のjQueryは属性とプロパティを明確に切り分けたみたいですね。
attrとpropの違いを詳しく知りたい方は
自分なんかよりもきちんとまとめてくださってる方がいますので、
他の方の記事を参考していただくといいと思います。

結論としては

before

data\Smarty\templates\product_class.tpl

$('#copy_from_first').click(function() {
    var check = $('#check_0').attr('checked');
    $('input[id^=check_]').attr('checked', check);

after

data\Smarty\templates\product_class.tpl

$('#copy_from_first').click(function() {
    var check = $('#check_0').prop('checked');
    $('input[id^=check_]').prop('checked', check);

attrをpropに変えるだけです。
EC-CUBEで同じようにJavaScript関係でチェックボックスの挙動がおかしいところがあれば、一度この記述がないか疑ってみた方がいいかもしれませんね。