jQuery技术：未勾选复选框时如何阻止Buy now按钮默认函数并加红边框？

我来帮你搞定这个问题！你的代码里有几个关键踩坑点导致功能失效，咱们一步步修正：

问题分析 #

1. 判断时机错误：你是在页面加载完成时一次性判断复选框状态，然后绑定点击事件——但这个判断只会执行一次，之后用户勾选/取消复选框都不会更新逻辑，导致后续点击行为完全不受新状态影响。
2. 未阻止默认行为：你没有阻止按钮的默认事件（包括原来的alert和链接跳转），所以即使没勾选复选框，原来的alert还是会触发。
3. CSS语法错误：你给border赋值时多了个分号（'1px solid red;'），这会导致样式无法正常生效。

修正后的代码 #

直接把逻辑整合到一个点击事件里，每次点击时实时检查复选框状态：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms-required" style="font-size: 11px;margin: 10px 0 20px 0; display: inline-block;">
  <input type="checkbox" class="input checkbox" name="terms" id="terms" style="position: absolute;">
  <label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">Ich habe die <a href="" target="_blank">Allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiert. <span class="required">*</span></label>
</div>
<br>
<a href="#" id="upsellyes">Buy now</a>
<p>or</p>
<a href="#"><br />No thanks </a>

<script>
$(document).ready(function() {
  $("#upsellyes").click(function(e) {
    // 实时获取复选框状态
    const isTermsChecked = $("#terms").is(":checked");
    
    if (!isTermsChecked) {
      // 添加红色边框（修正了CSS语法错误）
      $("#terms-required").css('border', '1px solid red');
      // 阻止默认行为：包括链接跳转和原来的alert触发
      e.preventDefault();
    } else {
      // 可选优化：勾选后移除红色边框，提升用户体验
      $("#terms-required").css('border', 'none');
      // 正常触发提示框
      alert('hello');
    }
  });
});
</script>

关键说明 #

• 实时检查状态：把复选框的判断放在点击事件内部，确保每次点击都会根据当前状态执行对应逻辑。
• 阻止默认行为：通过e.preventDefault()阻止链接的默认跳转，同时因为我们把原来的alert移到了else分支里，只有勾选时才会触发，完美实现需求。
• 修复CSS错误：去掉了border值里多余的分号，让样式正常生效。

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