javascript - 如果未选中复选框，则不触发onclick默认功能

如果有人单击“立即购买”按钮，而没有选中复选框，则该按钮不应触发默认功能（在本示例中为“ hello”，不会发出警报），但是它应将复选框标记为红色边框。但是，选中此框后，它将触发默认功能（在这种情况下，警告带有“ hello”）。

我正在努力禁用默认功能而不禁用按钮。同样出于某种原因，它没有创建红色边框。我该如何解决？

$("#upsellyes").click(function() {
  alert('hello');
});

$(document).ready(function() {
  if (!$("#terms").is(":checked")) {
    $("#upsellyes").click(function() {
      $("#terms-required").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>

最佳答案

您需要了解您的逻辑，以便您不仅在页面加载时检查单击处理程序中复选框的状态。尝试这个：

$(document).ready(function() {
  $("#upsellyes").click(function(e) {
    if (!$("#terms").is(":checked")) {
      e.preventDefault();
      $("#terms-required").addClass('invalid');
    } else {
      $("#terms-required").removeClass('invalid');
      console.log('box has been checked...');
    }
  });
})

#terms-required {
  font-size: 11px;
  margin: 10px 0 20px 0;
  display: inline-block;
}

#terms {
  position: absolute;
}

label {
  display: inline-block;
  font-weight: normal;
  margin-left: 25px;
}

.invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="terms-required">
  <input type="checkbox" class="input checkbox" name="terms" id="terms">
  <label for="terms" class="checkbox">
    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="#">No thanks </a>

还要注意，您不应该在HTML中使用内联样式。我将这些样式规则提取到样式表中。

关于javascript - 如果未选中复选框，则不触发onclick默认功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48458678/