jquery - 正しいデータ マスキングのための Live Update データ マスク属性

Question

フォームでブートストラップ データ マスキングを使用しています。ユーザーがさまざまなカードの種類を選択できる選択ドロップダウンがあります。たとえば、American Express、Discover、Visa....

ユーザーが American Express を選択すると、クレジット カード番号のテキスト入力で入力を「5555-555555-55555」としてマスクします。他のクレジット カード タイプの場合、inout マスクは「5555-5555-5555-5555」にする必要があります。American Express 以外のクレジット カードの場合は 16 桁、American Express の場合は 15 桁、正しい場所にハイフンを付けてください。

私は今まで私のコードにこれを持っています

$(document).on("change", "#creditcardtype", function(){
    if($(this).val() == "American Express"){
        $("#Cnumber").attr("data-mask","9999-999999-99999");
    }else{
        $("#Cnumber").attr("data-mask", "9999-9999-9999-9999");
    }
});

このコードは、初めてデータ マスクを更新し、カードの種類が変更された場合、次回は更新しません。何か助けてください??