檢查是否至少選中一個復選框以啟用鏈接-有解無憂

我有一個多步驟的表格，我在一個步驟上遇到問題，如果用戶沒有選中至少一個復選框，我想阻止他們在表格中繼續前進

問題是，如果我檢查任何內容，CTA 是可點擊的，但如果我取消選中我的復選框，我仍然可以點擊 CTA 并在表單中進行

$('input[name="PROBLEM"]').on('change',function(){
                 $(".four").removeClass('isDisabled', this.checked);
             });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="answer">
   <div id="row1">
       <span class="answer">
           <input name="PROBLEM" type="checkbox" id="crash" value="crash">
           <label for="crash">Crash/bugs</label>
       </span>
      <span class="answer">
          <input name="PROBLEM" type="checkbox" id="transfer" value="transfer">
          <label for="transfer">Transfer</label>
       </span>
   </div>
</div>
<div class="cta spacebtn">
    <a href="#partfour" class="isDisabled four"></a>
</div>

我嘗試使用 length > 0 但不知何故沒有成功（可能是因為我還是 JS 的初學者）

關于如何解決這個問題的任何想法？先感謝您

uj5u.com熱心網友回復：

告訴toggleClass僅isDisabled在選中復選框的長度為 0 時添加類。

$(selector).toggleClass(classname,function(index,currentclass),switch)

開關可選。一個布林值，指定是否只應添加（true）或僅洗掉類（false）

$('input[name="PROBLEM"]').on('change',function(){
   const checkedBox = $("input[name='PROBLEM']:checked").length
   $(".four").toggleClass('isDisabled', checkedBox === 0);
});

.isDisabled {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="answer">
   <div id="row1">
       <span class="answer">
           <input name="PROBLEM" type="checkbox" id="crash" value="crash">
           <label for="crash">Crash/bugs</label>
       </span>
      <span class="answer">
          <input name="PROBLEM" type="checkbox" id="transfer" value="transfer">
          <label for="transfer">Transfer</label>
       </span>
   </div>
</div>
<div class="cta spacebtn">
    <a href="#partfour" class="isDisabled four">CTA</a>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/521008.html

標籤：htmljQuery形式

上一篇：kubernetes入口不接受自簽名ssl

下一篇：單擊時跨度標簽不會向上移動