Skip to content

Select/Deselect all does not trigger change JS DOM events #1504

@tomjn

Description

@tomjn

Describe the bug

I'm trying to conditionally do things dependent on the value of other fields, and have a change event which works great. But it does not work for multicheck fields. This is because cmb.toggleCheckBoxes uses .prop to clear/set the checkboxes but this does not fire the change event, it must be triggered manually which it isn't.

Steps to reproduce (I have confirmed I can reproduce this issue on the develop branch):

  1. Set up a multicheckbox
  2. attach change event listeners that do something to the checkbox input elements
  3. use the select/deselect all toggle
  4. notice the event listeners did not fire

Possible Solution

Add .trigger('change'); to the end of those lines in https://github.com/CMB2/CMB2/blob/develop/js/cmb2.js#L235

		// If the button has already been clicked once...
		if ( $this.data( 'checked' ) ) {
			// clear the checkboxes and remove the flag
			$multicheck.prop( 'checked', false ).trigger('change');
			$this.data( 'checked', false );
		}
		// Otherwise mark the checkboxes and add a flag
		else {
			$multicheck.prop( 'checked', true ).trigger('change');
			$this.data( 'checked', true );
		}

or even for a 1 line change at the end:

		// If the button has already been clicked once...
		if ( $this.data( 'checked' ) ) {
			// clear the checkboxes and remove the flag
			$multicheck.prop( 'checked', false );
			$this.data( 'checked', false );
		}
		// Otherwise mark the checkboxes and add a flag
		else {
			$multicheck.prop( 'checked', true );
			$this.data( 'checked', true );
		}
		$multicheck.trigger('change');

Based on https://stackoverflow.com/questions/29049258/how-to-change-prop-checked-and-trigg-the-onchange-event-of-the-same-input/29049945#29049945

Possible Solution's Risk Level

minimal

Additional context

This is a general jQuery issue with a general workaround.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions