【问题标题】:Checkbox still gets unchecked despite using preventDefault尽管使用了 preventDefault,复选框仍然未被选中
【发布时间】:2019-01-31 18:28:06
【问题描述】:

getInfo() 返回false 时,会抛出alert 窗口,但复选框仍然会更改;检查是否未选中,反之亦然。

有什么帮助吗?

$("input[type='checkbox']").click(function(event) {
  var someCondition = getInfo();
  if (someCondition === false) {
    event.preventDefault();
    window.alert("Nope");
    return false;
  }
});

function getInfo() {
  return false; // just for testing
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />

【问题讨论】:

  • 我无法重现它:您的代码按预期工作。另外,避免使用alert(),因为它会阻止脚本执行。使用console.log() 并检查您的开发工具控制台。尝试控制台日志记录someCondition:您确定它正在评估为false
  • 我已将您的代码放在一个运行良好的 sn-p 中。检查以确保控制台中没有错误,并且在 DOM 加载后您正在运行 jQuery 代码。还要确保getInfo() 返回的是false,而不是'false'0
  • 此问题无法重现。也许您需要清除 cookie 和缓存,然后再试一次。
  • 您的代码按照说明中的说明运行。
  • getInfo() 是否使用异步调用?

标签: javascript jquery


【解决方案1】:

如果我正确理解您的需求,您可以使用它

  $("input[type='checkbox']").click(function (event) {
         var someCondition = getInfo();
         if(someCondition === false) {
            var checkVal = $("input[type='checkbox']").val();
             $("input[type='checkbox']").attr( "checked", !checkVal );
             window.alert("Nope");

         }
     });

或者如果您希望在您的条件为假的情况下取消选中复选框

  $("input[type='checkbox']").click(function (event) {
         var someCondition = getInfo();
         if(someCondition === false) {
             $("input[type='checkbox']").attr( "checked", false);
             window.alert("Nope");

         }
     });

希望对你有帮助

【讨论】:

  • 为什么 OP 需要使这比他现有的工作代码更复杂?
【解决方案2】:

您的代码似乎可以在小提琴上运行,但其他一些插件可能会干扰该行为。不过,请尝试以下方法,看看是否能解决问题

 $("input[type='checkbox']").on('click',function (event) {
        var someCondition = getInfo();
        var checkBox = $(this);
        if(someCondition === false) { 
            event.preventDefault();
            checkBox.prop('checked', !checkBox.prop('checked'))
            window.alert("Nope");
            return false;
        }
    });

【讨论】:

  • 为什么 OP 需要使这比他现有的工作代码更复杂?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多