如果未选中复选框，则不要在单击默认功能时触发

如果有人点击"立即购买"按钮，而不勾选复选框，则该按钮不应触发默认函数(在本例中没有带有"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 中使用内联样式。我将这些样式规则提取到样式表中。

这应该可以为您解决问题：

$("#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>

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

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

我稍微改变了你的片段。希望它会有用。

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');
    }
  });
});

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

你可以试试这个。希望这项工作:)

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

不要在单击函数之前使用 if 块。由于您有 2 个相同的点击函数，因此两者都会触发。因此，无论是否勾选该框，您都将始终收到问候警报。

只需更改一般的点击功能

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

相关内容

最新更新

热门标签：