jQuery实现用户未勾选当前页复选框时禁止切换其他标签页的方法

问题修复方案 #

根因说明 #

你当前的代码仅实现了未勾选条款时弹出提示的逻辑，没有阻止Bootstrap标签页的默认切换事件，因此提示弹出后仍然会正常跳转到目标标签页。

修复后的完整JS代码 #

$(document).ready(function() {
  // 监听除条款页外所有标签的点击事件
  $('#tabs a:not([href="#homepage"])').click(function(e) {
    if (!$('#reg').is(":checked")) {
      Swal.fire({
        icon: "warning",
        text: '请先勾选条款复选框，再访问其他页面'
      });
      // 核心修复：阻止默认跳转与事件冒泡，禁止标签切换
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  });

  // 可选优化：勾选后自动解锁标签，未勾选时标签置灰不可点
  $('#reg').change(function() {
    const isChecked = $(this).is(':checked');
    $('#tabs li:not(:first)').toggleClass('disabled', !isChecked);
  });
});

如果要实现标签置灰效果，可以在CSS中添加如下规则：

.nav-tabs > li.disabled > a {
  color: #999;
  cursor: not-allowed;
}

修改点说明 #

• 为点击事件添加了事件对象e，用于控制事件行为
• 将标签选择器优化为a:not([href="#homepage"])，无需手动罗列所有其他标签的href，后续新增标签也无需修改代码
• 未勾选条款时，除弹出提示外，新增了阻止默认跳转、阻止事件冒泡的逻辑，从根源上禁止标签切换
• 可选优化逻辑可以让界面交互更直观，用户未勾选时就能看到其他标签是不可点击状态，不用点击后才收到提示

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