任何人都可以帮助 jquery 中的功能吗？答案

【问题标题】：Can anyone help the functionality in jquery?任何人都可以帮助 jquery 中的功能吗？
【发布时间】：2020-12-01 10:38:35
【问题描述】：

when selected the button the two siblings of select button should be disabled and after clicking 1st it should be displayed continue button respectively

【问题讨论】：

插入您的代码
jsfiddle.net/bprakash23/zf2ambLw/5 你能在这里检查吗@sergey kuznetsov
您希望您的“继续 6 个月计划”按钮在单击较高的“选择”按钮后变为活动状态？
是的，如果我选择任何选择按钮，则继续按钮应显示在底部，而其他两个选择按钮应淡出，即使我选择第二个和第三个，它也将具有相同的功能，如果我选择继续文本按钮应该是一个是 3 个月，另一个是 1 个月来填充。
@sergey kuznetsov 我已经在描述中给出了图片，请检查并做必要的事情。非常感谢提前！

标签： html jquery css jquery-ui jquery-mobile

【解决方案1】：

这样的结果有必要吗？

$(document).ready(function() {
 $('.btn-select').on('click', function(){
  $('.btn-continue').css('display', 'none');
  $('.btn-select').prop('disabled', true);
  $(this).parents('.monthly_plan').find('.btn-continue').css('display', 'block');
  $(this).prop('disabled', false);
 });
 
 $('.btn-continue').on('click', function(){
  $('.btn-select').prop('disabled', false);
  $(this).css('display', 'none');
 });
 
});

.card.first_mnth-details{
    padding: 1rem;
    border-top: 10px solid #E3D6B4;
    box-shadow: 0 3px 6px #00000029;
    text-align: center;
}
.card.first_mnth-details .price{
    margin: 0;
    font-weight: 700;
}
.monthly_plan{
  padding: 10px 0;
}
.container{
  padding:40px 0;
}
.btn-continue{
  text-align:center;
  display:none;
  background: #e78471;
}
.active{
  display:block;
}
.btn-select{
  background: #fffbf0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="monthly_plan">
                    <div class="card first_mnth-details">
                        <p class="price">₹999 per month</p>
                        <p>Order Now & Save 63%</p>
                        <p class="home-del">*Home delivered and billed monthly for the next 6 months</p>
                        <button class="btn btn-select"> Select</button>
                    </div>
                     <div class="pt-4">
                        <button class="btn btn-continue btn-block">Continue with 6 months plan
                         </button>
                     </div>
                </div>
                <div class="monthly_plan">
                    <div class="card first_mnth-details">
                        <p class="price">₹1499 per month</p>
                        <p>Order Now & Save 44%</p>
                        <p class="home-del">*Home delivered and billed monthly for the next 3 months</p>
                        <button class="btn btn-select"> Select</button>
                    </div>
                    <div class="pt-4">
                        <button class="btn btn-continue btn-block">Continue with 6 months plan
                         </button>
                     </div>
                </div>
                <div class="monthly_plan">
                    <div class="card first_mnth-details">
                        <p class="price">₹1699 per month</p>
                        <p>Save 37% On Trial Plan</p>
                        <p class="home-del">*Home delivered and billed monthly for the next 1 months</p>
                        <button class="btn btn-select"> Select</button>
                    </div>
                    <div class="pt-4">
                        <button class="btn btn-continue btn-block">Continue with 6 months plan
                         </button>
                     </div>
                </div>

【讨论】：