單擊Jquery時禁用或激活默認卡

我一直在嘗試使用不同的方法來撰寫這個 jQuery 部分，但它不起作用。我確實有一張卡片串列，其中第一張卡片具有默認類。目標是每次單擊“設定為默認值”按鈕時，我都可以在父級“bgCreditcard”上設定“默認”類并同時禁用該按鈕。

我的問題是我試過了toggleClass，但它使用“設定為默認”按鈕激活了兩張卡。我試圖用道具禁用，但也沒有運氣。有任何想法嗎？

這是我的 HTML：

<div class="row">
     <div class="col-12 colg-md-6 card bgCreditcard active">
        <div class="card-body">
             <div class="card-text">
                  <p>Card 1</p>
                    <button class="bg-btn bg-default bg-btn-disabled" disabled>Default</button>
             </div>
         </div>
     </div>
     <div class="col-12 colg-md-6 card bgCreditcard">
            <div class="card-body">
                  <div class="card-text">
                       <p>Card 2</p>
                       <button class="bg-btn bg-default bg-btn-default">Set as Default</button>
                  </div>
             </div>
      </div>
      <div class="col-12 colg-md-6 card bgCreditcard">
           <div class="card-body">
                <div class="card-text">
                     <p>Card 3</p>
                     <button class="bg-btn bg-default bg-btn-default">Set as Default</button>
                </div>
           </div>
      </div>
</div>

JS：

$('.bg-default').click(function(){
    $('.bgCreditcard').each(function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
    });
});

uj5u.com熱心網友回復：

考慮以下。

$(function() {
  function clearDefault(card) {
    $(card).removeClass("active");
    $("button", card).prop("disabled", false).toggleClass("bg-btn-default bg-btn-disabled").html("Set as Default");
  }

  function addDefault(card) {
    $(card).addClass("active");
    $("button", card).prop("disabled", true).addClass("bg-btn-disabled").html("Default");
  }

  function setDefault(event) {
    clearDefault($(".bgCreditcard.active"));
    addDefault($(event.target).closest(".bgCreditcard"));
  }

  $(".bgCreditcard button").click(setDefault);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-12 colg-md-6 card bgCreditcard active">
    <div class="card-body">
      <div class="card-text">
        <p>Card 1</p>
        <button class="bg-btn bg-default bg-btn-disabled" disabled="true">Default</button>
      </div>
    </div>
  </div>
  <div class="col-12 colg-md-6 card bgCreditcard">
    <div class="card-body">
      <div class="card-text">
        <p>Card 2</p>
        <button class="bg-btn bg-default bg-btn-default">Set as Default</button>
      </div>
    </div>
  </div>
  <div class="col-12 colg-md-6 card bgCreditcard">
    <div class="card-body">
      <div class="card-text">
        <p>Card 3</p>
        <button class="bg-btn bg-default bg-btn-default">Set as Default</button>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以嘗試以下代碼：

HTML：

<div class="row">
     <div class="col-12 colg-md-6 card bgCreditcard active">
        <div class="card-body">
             <div class="card-text">
                  <p>Card 1</p>
                    <button class="bg-btn bg-default" disabled>Default</button>
             </div>
         </div>
     </div>
     <div class="col-12 colg-md-6 card bgCreditcard">
            <div class="card-body">
                  <div class="card-text">
                       <p>Card 2</p>
                       <button class="bg-btn bg-default bg-btn-default">Set as Default</button>
                  </div>
             </div>
      </div>
      <div class="col-12 colg-md-6 card bgCreditcard">
           <div class="card-body">
                <div class="card-text">
                     <p>Card 3</p>
                     <button class="bg-btn bg-default bg-btn-default">Set as Default</button>
                </div>
           </div>
      </div>
</div>

jQuery：

$(document).on('click', '.bg-btn' ,function(){

  $('.bgCreditcard').removeClass('active');
  $('.bgCreditcard').find('button').prop('disabled', false)
  $('.bgCreditcard').find('button').removeClass('bg-btn-disabled')
   $(this).closest('.bgCreditcard').addClass('active');
  
   
   if($(this).closest('.bgCreditcard').hasClass('active')) {
     $(this).prop('disabled', true);
     $(this).addClass('bg-btn-disabled')
   }
});

標籤：javascript jQuery 禁用

上一篇：jQuery切換類沒有回應

下一篇：為什么將元素附加到先前附加的元素不起作用？