运行决定在实际检查任何内容之前是否检查 checkbox/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">

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

Run code that decides if checkbox/radio will be checked before actually checking anything (javascript)

javascript

checkbox

radio-button

preventdefault

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

Run code that decides if checkbox/radio will be checked before actually checking anything (javascript)

javascript

checkbox

radio-button

preventdefault

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