运行代码，以确定在实际检查任何内容之前是否会选中复选框/收音机(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);
};

我的问题是，我似乎不能在我的element.prop('checked', true);函数中使用addItem，因为preventDefault停止了这一点。

我可以绕开这条路吗?或者我该走哪条路才能得到我想要的功能呢？我真的不想阻止表单元素被检查，而只是通过我的应用程序检查或取消检查。

Answer 1

似乎不可能在调用checked之后立即设置复选框的preventDefault属性。尝试用setTimeout包装您的setTimeout调用，这将确保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">

​