He estado tratando de usar diferentes formas de codificar esta parte de jQuery, pero no funciona. Tengo una lista de tarjetas con la primera que tiene una clase predeterminada. El objetivo sería que cada vez que haga clic en el botón que dice "Establecer como predeterminado", pueda establecer la clase "predeterminada" en la tarjeta principal "bgCreditcard" y deshabilitar el botón al mismo tiempo.
Mi problema es que probé toggleClass , pero estaba activando ambas tarjetas con el botón "establecer como predeterminado". Traté de deshabilitar con prop, pero tampoco tuve suerte. ¿Algunas ideas?
Este es mi 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"); }); });Puedes probar el siguiente código:
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') } });Considera lo siguiente.
$(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/bootstrap@5.1.3/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>