jQuery单选/复选框点击更新价格异常及禁用需求修复

我看到你遇到了两个头疼的小问题：一是选完产品尺寸后再切换产品类型，价格不会跟着重新计算；二是希望用户在选产品类型前，没法点击尺寸复选框。咱们一步步来把这些问题搞定：

问题根源分析 #

1. 重复绑定事件：你现在的代码每次点产品类型单选框时，都会给尺寸复选框绑定一次change事件，次数多了旧的逻辑还在跑，价格计算自然就乱套了。
2. 缺失禁用逻辑：页面加载后尺寸复选框是可点击状态，没有引导用户先选产品类型。

解决方案步骤 #

1. 先锁死尺寸复选框 #

页面刚加载完，直接把所有尺寸复选框设为禁用状态，让用户必须先选产品类型才能操作这部分。

2. 把价格计算抽成独立函数 #

别在产品类型的点击事件里重复绑定尺寸的change事件，单独写一个计算价格的函数，不管是换产品类型还是改尺寸，都调用这个函数，这样就不会出现重复绑定的问题，切换类型时也能自动重新算价。

3. 选产品类型后解锁并重新算价 #

用户选好产品类型后，立即启用尺寸复选框，同时触发一次价格计算——如果之前已经选过尺寸，会自动换成当前类型对应的价格。

修改后的完整代码 #

HTML #

<div class="club_products row"> 
  <div class="club_product_image"> 
    <img src="http://via.placeholder.com/250x350?text=PRODUCT" alt="coffee" class="club_product_wb"/> 
  </div> 
  <div class="club_product_form"> 
    <form action method="get"> 
      <div class="club_product_title">Select Product Type</div> 
      <div class="pretty p-default p-round"> 
        <input type="radio" name="type" value="wb" class="jm_product_type" /> 
        <div class="state p-success"> 
          <label>Whole Bean</label> 
        </div> 
      </div> 
      <div class="pretty p-default p-round"> 
        <input type="radio" name="type" value="rg" class="jm_product_type" /> 
        <div class="state p-success"> 
          <label>Roasted Grounded</label> 
        </div> 
      </div> 
      <div class="club_product_title">Select Product Size</div> 
      <div class="pretty p-icon p-smooth"> 
        <input type="checkbox" name="size[]" value="4oz" class="update_price" /> 
        <div class="state p-success"> 
          <i class="icon fa fa-check"></i> 
          <label>4 oz</label> 
        </div> 
      </div> 
      <div class="pretty p-icon p-smooth"> 
        <input type="checkbox" name="size[]" value="8oz" class="update_price" /> 
        <div class="state p-success"> 
          <i class="icon fa fa-check"></i> 
          <label>8 oz</label> 
        </div> 
      </div> 
      <div class="pretty p-icon p-smooth"> 
        <input type="checkbox" name="size[]" value="16oz" class="update_price" /> 
        <div class="state p-success"> 
          <i class="icon fa fa-check"></i> 
          <label>16 oz</label> 
        </div> 
      </div> 
      <div class="club_product_title">Select Subscription Length</div> 
      <div class="pretty p-default p-round"> 
        <input type="radio" name="length" value="30days" /> 
        <div class="state p-success"> 
          <label>30 Days</label> 
        </div> 
      </div> 
      <div class="pretty p-default p-round"> 
        <input type="radio" name="length" value="45days" /> 
        <div class="state p-success"> 
          <label>45 Days</label> 
        </div> 
      </div> 
      <div class="pretty p-default p-round"> 
        <input type="radio" name="length" value="60days" /> 
        <div class="state p-success"> 
          <label>60 Days</label> 
        </div> 
      </div> 
      <div class="club_product_price">Price: $<span>0</span> USD</div> 
      <input type="submit" name="join_our_club" value="Join Our Club" class="btn club_submit" /> 
    </form> 
  </div> 
</div>

jQuery #

$(document).ready(function(){
  // 页面加载完成后，先禁用所有尺寸复选框
  $('.update_price').prop('disabled', true);
  
  // 单独抽离价格计算函数，复用性更强
  function calculatePrice() {
    const selectedType = $('input[name=type]:checked').val();
    if (!selectedType) {
      // 没选产品类型时，价格重置为0
      $(".club_product_price span").text('0.00');
      return;
    }
    
    let sum = 0;
    $(".update_price:checked").each(function(){
      const size = $(this).val();
      // 根据选中的产品类型，匹配对应尺寸的价格
      if (selectedType === 'wb') {
        switch(size) {
          case '4oz': sum += 19.99; break;
          case '8oz': sum += 35.99; break;
          case '16oz': sum += 65.99; break;
        }
      } else if (selectedType === 'rg') {
        switch(size) {
          case '4oz': sum += 18.99; break;
          case '8oz': sum += 36.99; break;
          case '16oz': sum += 66.99; break;
        }
      }
    });
    $(".club_product_price span").text(sum.toFixed(2));
  }
  
  // 产品类型切换事件：启用复选框 + 重新计算价格
  $('input[name=type]').on('click', function(){
    $('.update_price').prop('disabled', false);
    calculatePrice();
  });
  
  // 尺寸选择变化事件：直接调用计算函数
  $(".update_price").on("change", calculatePrice);
});

代码说明 #

• 初始化禁用：一打开页面就锁死尺寸复选框，引导用户先完成产品类型选择。
• 统一计算逻辑：把价格计算单独拎出来，不管是切换类型还是改尺寸，都用同一个逻辑，避免重复绑定导致的混乱。
• 实时更新：切换产品类型时，自动重新计算已选尺寸的价格，完美解决切换类型后价格不更新的问题。

这样修改后，你的表单就能按预期工作啦：用户必须先选产品类型才能选尺寸，切换类型时价格也会自动跟着更新。

内容的提问来源于stack exchange，提问作者I Am Stack