如果不确定,如何防止从标签单击中选中复选框?

时间:2018-11-20 15:50:03

标签: javascript

如果复选框不确定,如何停止与复选框相关联的标签中的点击事件?

我尝试了以下操作,但无济于事:

el.parent().find('.arena-custom-label').click(function ( event ) {
    if (el.is(':indeterminate')) {
        event.preventDefault();
        el.attr('indeterminate', false);
        el.removeClass('indeterminate');
        dataGrid.find('.ag.gr:checked').trigger('click');
    } else {
        el.change(function () {
            if (el.is(':checked')) {
                dataGrid.find('tbody .ag.gr:not(:checked)').trigger('click');
            } else {
                dataGrid.find('tbody .ag.gr:checked').trigger('click');
            }
        });
    }
});

el是复选框本身。

目标是在此复选框不确定时,在关联的标签上单击,我想要它要做的就是变得不确定且未选中。然后,我将触发表格中所有选中的复选框,也将它们取消选中。

问题是,当我单击不确定的复选框标签时,它导致它被选中,导致所有未选中的复选框都被选中。与我想要的相反。

1 个答案:

答案 0 :(得分:2)

indeterminateprop,而不是attribute,因此您应该使用jquery.prop进行更新:

el.parent().find('.arena-custom-label').click(function ( event ) {
  if (el.is(':indeterminate')) {
    event.preventDefault();
    el.prop('indeterminate', false);
    el.removeClass('indeterminate');
    dataGrid.find('.ag.gr:checked').trigger('click');
  } else {
    el.change(function () {
      if (el.is(':checked')) {
          dataGrid.find('tbody .ag.gr:not(:checked)').trigger('click');
      } else {
          dataGrid.find('tbody .ag.gr:checked').trigger('click');
      }
    });
  }
});

有关说明,请参见herehere

Here is a fiddle和香草JS演示。