Question

如果有人点击了＆＃34;立即购买＆＃34;按钮，没有勾选复选框，按钮不应该激活默认功能（在这个例子中没有警告用＆＃34;你好＆＃34;），但它应该用红色边框标记复选框。但是当选中此框时，它应该触发默认功能（在这种情况下使用＆＃34; hello警告）。

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

＆＃13;

$("#upsellyes").click(function() {
  alert('hello');
});

$(document).ready(function() {
  if (!$("#terms").is(":checked")) {
    $("#upsellyes").click(function() {
      $("#terms-required").css('border', '1px solid red;');
    });
  }
})

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;
＆＃13;
$(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...'); } }); })
＆＃13;
#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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

Answer 2

这应该适合你：

$("#upsellyes").click(function() {
  if ($("#terms").is(":checked")) {
    alert('hello');
  } else {
    $("#terms-required").css('border', '1px solid red');
  }
});

$("#terms").click(function() {
  $("#terms-required").css('border', $(this).is(":checked") ? 'none' : '1px solid red');
});

它将检查复选框是否已选中，并根据它应用/删除边框。

<强>演示

$("#upsellyes").click(function() {
  if ($("#terms").is(":checked")) {
    alert('hello');
  } else {
    $("#terms-required").css('border', '1px solid red');
  }
});

$("#terms").click(function() {
  $("#terms-required").css('border', $(this).is(":checked") ? 'none' : '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>

Answer 3

检查完状态后，您还可以在点击处理程序中使用return false;。

$(document).ready(function() {
  $("#upsellyes").click(function(e) {
    if (!$("#terms").is(":checked")) {
      $("#terms-required").addClass('invalid');
      return false;
    } else {
      $("#terms-required").removeClass('invalid');

    }
  });
})

Answer 4

我略微更改了你的代码段。希望它会有用。

＆＃13;

function termsChecked() {
    return $("#terms").is(":checked");
}

$("#upsellyes").click(function() {
  if (termsChecked()) {
    alert('hello');
  }
});

$(document).ready(function() {
  $("#upsellyes").click(function() {
    if (!termsChecked()) {
      $("#terms-required").css('border', '3px solid red');
    }
    else {
      $("#terms-required").css('border', 'none');
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 5

你可以试试这个。希望这项工作：）

$("#upsellyes").click(function(){
  if (!$("#terms").is(":checked")) {
        $("#terms-required").css('border', 'border: 1px solid red;');
            }
  else{
        alert('hello');
            }
    });

Answer 6

在点击功能之前不要使用if块。由于您有两个相同的点击功能，两者都会触发。因此，无论是否勾选方框，您都会收到问候警告。

只需更改一般的点击功能

$(document).ready(function() {
    $("#upsellyes").click(function() {
      if (!$("#terms").is(":checked")) {
        alert("hello");
      else{
        $("#terms-required").css("border", "1px solid red");
      }
    });
  }
})

如果未选中复选框，请不要触发onclick默认功能

6 个答案: