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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions