How to prevent checkbox being checked from label click if it is indeterminate?

Question

How would I stop a click event from a label associated to a checkbox if the checkbox is indeterminate?

I have attempted the following, but to no avail:

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 being the checkbox itself.

The goal is while this check box is indeterminate, upon the associated label click all I want it to do is go out of indeterminate and to unchecked. Then I will trigger all checked checkboxes in a table to go unchecked as well.

The problem is that when I click the indeterminate checkbox label, it causes it to go checked resulting in all unchecked checkboxes to go checked. The opposite of what I want.

I don't completely understand which workflow you're trying to create, but I usually just hide all non-active elements so they can't be clicked in the first place. — Shilly, Nov 20 '18 at 15:56

score 2 · Accepted Answer · answered Nov 20 '18 at 17:06

indeterminate is a prop, not an attribute so you should use jquery.prop to update:

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');
      }
    });
  }
});

See here and here for explanations.

Here is a fiddle with a vanilla JS demo.

You are right. And you should always use `jquery.prop` instead of `jquery.attr`. It's faster and makes your code more readable. Good answer. — Tarabass, Nov 20 '18 at 17:32
This was it! Im ashamed to say I finally understand the difference between prop and attr. Thank you. — Jason Ayer, Nov 21 '18 at 15:03

How to prevent checkbox being checked from label click if it is indeterminate?

1 Answers1