购物车无商品时如何禁用modal模态框内的提交按钮？

你可以根据自己的需求选择以下两种方案，也可以同时使用适配全场景：

方案1：服务端PHP直接渲染（页面加载时生效） #

在渲染模态框底部按钮时，直接通过PHP判断购物车状态控制按钮是否可用，无需额外引入JS：

1. 先在模态框代码上方新增购物车状态判断

<?php
// 判断购物车是否为空
$isCartEmpty = !isset($_SESSION['cart']) || empty($_SESSION['cart']);
?>

2. 修改底部提交按钮的代码，为空时添加禁用样式与属性：

<div class="modal-footer">
    <a type="submit" 
       class="btn btn-primary <?php echo $isCartEmpty ? 'disabled' : '';?>" 
       id="btn-mohon-cart" 
       name="mohonbtn" 
       <?php echo $isCartEmpty ? 'style="pointer-events:none;opacity:0.6;"' : '';?>
       href="<?php echo ROOT_PATH; ?>pusat_sumber/penyelidik/permohonan_penyelidik.php">
       Mohon
    </a>
</div>

注：原生a标签的disabled属性不生效，所以需要额外添加pointer-events:none禁用点击

方案2：JavaScript动态控制（适配删除商品后实时生效场景） #

如果支持用户在模态框内删除商品，删除到最后一个时需要实时禁用按钮，可引入以下JS代码（依赖jQuery，你现有项目已经用了Bootstrap的话默认支持）：

// 模态框打开时自动检查购物车状态
$('#cartmodal').on('show.bs.modal', function () {
  checkCartStatus();
})

// 点击删除商品按钮后重新检查购物车状态
$(document).on('click', '.deleteitem', function() {
  // 此处保留你原本的删除商品逻辑
  $(this).closest('tr').remove();
  checkCartStatus();
})

// 公用购物车状态检查方法
function checkCartStatus() {
  // 统计购物车商品行数
  const cartItemCount = $('#cartBody tr').length;
  const $submitBtn = $('#btn-mohon-cart');
  if (cartItemCount === 0) {
    // 购物车为空时禁用按钮
    $submitBtn.addClass('disabled').css({'pointer-events': 'none', 'opacity': 0.6});
  } else {
    // 有商品时启用按钮
    $submitBtn.removeClass('disabled').css({'pointer-events': 'auto', 'opacity': 1});
  }
}

如果需要在购物车为空时显示提示，可在cartBody内为空时新增提示行：

<tbody id='cartBody'>      
    <?php if (isset($_SESSION['cart']) && !empty($_SESSION['cart'])) {
        foreach($_SESSION['cart'] as $k => $v){ ?>
        <tr id="view-cart">
        <td><?php echo $v['id_arkib'] ?> </td>
        <td><?php echo $v['tajuk']?> </td>
        <td><button class="btn btn-danger mdi mdi-delete deleteitem" required>Padam</button></td>
        </tr>
    <?php }
    } else { ?>
        <tr class="empty-tip">
            <td colspan="3" style="text-align:center;">购物车暂无商品</td>
        </tr>
    <?php } ?>         
</tbody>

此时需要修改checkCartStatus里的行数统计逻辑，排除提示行：

const cartItemCount = $('#cartBody tr:not(.empty-tip)').length;

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