jQuery监听select变化按option自定义属性控制按钮显隐

我有一个下拉选择器，需要根据select选项的自定义属性值，来控制对应按钮的隐藏或显示。

现有HTML代码 #

<div id="container-3">
<div id="inside-container">
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
  <option value="1kg" selected="selected" stock-status="true" class="attached enabled">1kg &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $75.90 &nbsp;- (In Stock)</option>
  <option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 &nbsp;- (No Stock)</option>
  <option value="3kg" stock-status="false" class="attached enabled">3kg - $174.90 &nbsp;- (No Stock)</option>
  <option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 &nbsp;- (No Stock)</option>
  <option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 &nbsp;- (No Stock)</option>
  <option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 &nbsp;- (No Stock)</option>
</select>
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-is-unavailable">Add to cart</button>
</div>
</div>

未生效的初始jQuery代码 #

$(document).ready(function() { 
  $('#pa_size').change(function(){
    if($("#pa_size").find("option:selected").attr('stock-status') == "false") {
      $("#container-3 .single_add_to_cart_button").hide();
    } else {
      $("#container-3 .single_add_to_cart_button").show();
    }
  });
}); 

/* 
我也尝试过使用如下if判断语句：
  if($('#pa_size option:selected').attr("stock-status") == "false") {
*/

待解决问题 #

• 如何修正上述jQuery代码使其正常运行，除代码错误外当前的实现思路是否合理？
• 如何在用户未进行任何交互前（即页面加载完成后）就执行状态校验：若下拉框默认选中项的stock-status属性值为false，则直接隐藏按钮？

修正后的完整可用代码 #

$(document).ready(function() {
  // 抽离独立的按钮状态更新函数，方便复用
  function toggleCartButtonStatus() {
    // 读取当前选中项的库存状态
    const selectedStockStatus = $('#pa_size option:selected').attr('stock-status');
    const $addToCartBtn = $('#container-3 .single_add_to_cart_button');

    if (selectedStockStatus === 'true') {
      $addToCartBtn.show();
      // 可选：同步解除按钮禁用状态，避免无法点击
      // $addToCartBtn.removeClass('disabled wc-variation-is-unavailable').prop('disabled', false);
    } else {
      $addToCartBtn.hide();
      // 可选：同步设置按钮为禁用状态，防止通过修改样式绕过限制提交请求
      // $addToCartBtn.addClass('disabled wc-variation-is-unavailable').prop('disabled', true);
    }
  }

  // 页面加载完成后立即执行一次校验，处理默认选中项的状态
  toggleCartButtonStatus();

  // 监听下拉框选择变化，更新按钮状态
  // 如果下拉框是动态异步渲染到页面的，请改用事件委托写法：
  // $(document).on('change', '#pa_size', toggleCartButtonStatus);
  $('#pa_size').on('change', toggleCartButtonStatus);
});

问题1说明 #

你的核心实现思路完全合理：监听select的change事件，读取选中项的自定义属性判断库存状态，再对应控制按钮显隐，这个逻辑方向没有问题。
原代码未生效可以从两个点排查：

• 确认jQuery库在该段代码执行前已经正确加载，控制台没有$ is not defined类的报错
• 如果select下拉框是后续动态渲染生成的（比如电商系统的可变商品规格常为异步加载），直接给#pa_size绑定事件会找不到目标元素，需要改用代码注释中提到的事件委托写法

可选优化点 #

不建议使用非标准的自定义属性stock-status，推荐修改为HTML5规范的data-*格式，也就是把option上的属性改为data-stock-status="true"，取值时可以直接用$('#pa_size option:selected').data('stock-status')，该方法会自动把字符串格式的"true"/"false"转为布尔值，不需要手动对比字符串，代码更简洁不易出错。

问题2说明 #

要实现页面加载完成后自动校验默认选项状态，只需要把状态更新的逻辑抽为独立函数，在DOM ready完成后手动调用一次该函数即可，不需要额外绑定其他事件，上述代码中toggleCartButtonStatus();就是做这个用的。

额外提示：只隐藏按钮存在安全隐患，用户可以通过浏览器开发者工具修改元素样式让按钮重新显示，建议在隐藏的同时给按钮加上disabled属性和禁用样式，后端接口也要同步做库存校验，避免超卖。

内容的提问来源于stack exchange，提问作者inspirednz