jQueryを使ってshopify buy ボタンを表示・非表示させる

現在、web上にshopifyのbuy buttonを設置しようとしているのですが、下記のような問題が出てしまいました。

以下のことを実現させたいです

.contact-sendをdisabledにして表示し、その後、ユーザーがチェックボックスをチェックし、いくつかの入力ボックスの値を入力した後に、この.contact-sendボタンを非表示にすると同時に、shopify-btn(デフォルトでは表示させていない)を表示する

shopify-btnに対して直接CSSやjqueryをあてるのはiframeが含まれているので、困難になるだろう思い、この方法を考えました

html
1<div class="contact-send">
2    <input type="submit"  value="Register payment info" disabled>
3</div>
4<div class="shopify-btn"><!--実際のsyopifyのbuy buttonをwrapperとして囲み、jqueryでこの要素を操作しています -->
5    <div id='product-component-11111111111111'></div> <!--実際のsyopifyのbuy button -->
6</div>

jQuery
1function shopify_btn_display(tel_value_1, tel_value_2, tel_value_3){
2  var checkbox_value = jQuery("input[type='checkbox']").is(":checked")
3  var phone_value = 0
4  if(tel_value_1 == 1 && tel_value_2 == 1 && tel_value_3 == 1){
5    phone_value = 1
6  }
7  if(checkbox_value == 1 && phone_value ==1){
8    jQuery(".contact-send").hide();
9    jQuery(".shopify-btn").show('fast');
10  }else{
11    jQuery(".contact-send").show();
12    jQuery(".shopify-btn").hide();
13  }
14 }

.contact-sendは正常に動作しています(表示/非表示)が、shopify-btnは表示されません。なぜ表示されないのか全く分からないです。また、クロームの開発者ツールを開いたり、画面サイズを変更したりするとこのshopify-btnが表示されます。

行動規範の内容に同意します

回答1件

JavaSuript
1var checkbox_value = jQuery("input[type='checkbox']").is(":checked")

の結果はTrue/Falseなので判定は1,0でできますが
判定等揃えましょう

JavaSuript
1function shopify_btn_display(tel_value_1, tel_value_2, tel_value_3){
2  var checkbox_value = jQuery("input[type='checkbox']").is(":checked")
3  var phone_value = false;
4  if(tel_value_1 == true && tel_value_2 == true && tel_value_3 == true){
5    phone_value = true;
6  }
7  if(checkbox_value == true && phone_value == true){
8    jQuery(".contact-send").hide();
9    jQuery(".shopify-btn").show('fast');
10  }else{
11    jQuery(".contact-send").show();
12    jQuery(".shopify-btn").hide();
13  }
14}