javascript - 在实际检查任何内容之前运行决定是否检查复选框/ radio 的代码(javascript)

Question

我正在使用 Javascript 和 jQuery 构建一个购物车应用程序，它需要在产品被点击时运行一些逻辑。单击的元素是单选按钮和复选框，代码将检查是否满足将产品添加到购物车的正确条件。

我尝试这样做的最初方法是在我的函数开始时运行 preventDefault()，运行一些逻辑来决定是否可以添加该项目，如果可以，则添加它到购物车并检查输入元素。

看起来像这样:

$(document).on("click","[data-item]", function(event) {
    cart.updateCart(this, event);
});

cart.updateCart = function(target, event) {
    if (event) {
        event.preventDefault();
    }
    // pseudo code...
    if (conditionIsMet === true) {
        cart.addItem(target);
    }
}

cart.addItem = function(item) {           
    products.push(item);
    var element = $('[value=' + item.key + ']');
    element.prop('checked', true);
};

我的问题是我似乎无法在我的 addItem 函数中使用 element.prop('checked', true);，因为 preventDefault 会阻止它。

我能以某种方式解决这个问题吗？或者我应该走什么路线来获得我想要的功能？我真的不想阻止表单元素被选中，而只是通过我的应用程序来选中或取消选中。

Answer 1

似乎无法在调用 preventDefault 后立即设置复选框的 checked 属性。尝试用 setTimeout 包裹你的 prop 调用，这将确保 checked 属性的更新发生在事件循环的另一轮:

$("#cb").on("click", function(event) {
  updateCart(this, event);
});

const updateCart = function(target, event) {
  if (event) {
    event.preventDefault();
  }
  // pseudo code...
  if (true === true) {
    addItem(target);
  }
}

const addItem = function(item) {
  setTimeout(function() {
    $('#cb').prop('checked', true);
  })
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb">