根據復選框選擇切換按鈕

Question

我目前正在構建一個包含 3 個復選框和一個顯示在下方的動態按鈕的表單。

我目前的問題是當您選擇多個然后再勾選一個時，活動狀態和停用狀態按鈕都會出現

https://staging-homecarepulse.kinsta.cloud/demo-select/這是我的演示鏈接

這是我使用的腳本

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
      if ($(this).is(":checked")) {
      $('#picture').attr('src', '');
    } else {
        $('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
    }
  var vals = arr.join(",")
  var str = "/demo/?demo_request_type=" + vals;
  var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
  
  $('.link-container').html(link);
  
});

</script>

這是我的 html

<input type="checkbox" id="checkbox1" class="mod-link" name="selected" value="es" hidden>
<label for="checkbox1" style="cursor: pointer;">CHECK BOX styling and info  HERE</label>

<div class="link-container" style="text-align:center;"></div>

<div style="text-align:center;">
<span class="result_img">
      <img id="picture" src="https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg"/>
    </span>
</div>

我想弄清楚如何隱藏灰色圖像按鈕，直到選中 ALL OR NO 復選框。 所以簡而言之，#picture 不應該顯示，直到 ALL OR NO CHECKBOXES ARE SELECTED

任何幫助表示贊賞

Answer 1

您也可以提前檢查arr.length以顯示和隱藏灰色按鈕。 請看下面的代碼：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
      if (arr.length > 0) {
      $('#picture').attr('src', '');
    } else {
        $('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
    }
  var vals = arr.join(",")
  var str = "/demo/?demo_request_type=" + vals;
  var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
  
  $('.link-container').html(link);
  
});

</script>

希望它能解決您的問題。