Conditional meta box logic

Hello,

I’m trying to create conditional logic for custom meta boxes on admin screen only and without plugin. This is a situation: I have checkboxes, which upon selection will show corresponding DIV which contain input field. It is basic show/hide, nothing complicated.

Meta box fields are working properly saving and displaying values. Conditional logic is managed using javascript, it’s working.

Problem is: When I show DIV via checkbox and click on update post, DIV doesn’t stay visible. This means I didn’t save logic properly.

My checkboxes and inputs are generated via foreach loop, and here is my issue. I’m using PHP switch to determine each type of field, and can’t find solution to save which DIV is visible and to stay visible.

I appreciate any help or any reference link suggestion. Thanks

This is my meta box class:

class Artikal_Meta_Box {
	private $screens = array(
		'artikli',
	);
	private $fields = array(
		array(
			'id' => 'check-artikal-braon',
			'label' => 'Braon',
			'type' => 'checkbox',
			'value' => 'color-field-artikal-braon',
		),
		array(
			'id' => 'check-artikal-crna',
			'label' => 'Crna',
			'type' => 'checkbox',
			'value' => 'color-field-artikal-crna',
		),		
		array(
			'id' => 'check-artikal-zuta',
			'label' => 'Žuta',
			'type' => 'checkbox',
			'value' => 'color-field-artikal-zuta',
		),
		array(
			'id' => 'check-artikal-tirkiz',
			'label' => 'Tirkiz',
			'type' => 'checkbox',
			'value' => 'color-field-artikal-tirkiz',
		),
		
		array(
			'id' => 'artikal-braon',
			'label' => 'Braon',
			'name' => 'braon',
			'type' => 'text',
		),
		array(
			'id' => 'artikal-crna',
			'label' => 'Crna',
			'name' => 'crna',
			'type' => 'text',			
		),
		array(
			'id' => 'artikal-zuta',
			'label' => 'Žuta',
			'name' => 'zuta',
			'type' => 'text',
		),
		array(
			'id' => 'artikal-tirkiz',
			'label' => 'Tirkiz',
			'name' => 'tirkiz',
			'type' => 'text',
		),
		
		array(
			'id' => 'artikal-suma',
			'label' => 'Stanje',
			'name' => 'artikal-suma',
			'type' => 'textarea',			
		),
		
	);

	/**
	 * Class construct method. Adds actions to their respective WordPress hooks.
	 */
	public function __construct() {
		add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
		add_action( 'save_post', array( $this, 'save_post' ) );
	}

	/**
	 * Hooks into WordPress' add_meta_boxes function.
	 * Goes through screens (post types) and adds the meta box.
	 */
	public function add_meta_boxes() {
		foreach ( $this->screens as $screen ) {
			add_meta_box(
				'artikal-info',
				__( 'Artikal', 'artikal-info' ),
				array( $this, 'add_meta_box_callback' ),
				$screen,
				'normal',
				'high'
			);
		}
	}

	/**
	 * Generates the HTML for the meta box
	 * 
	 * @param object $post WordPress post object
	 */
	public function add_meta_box_callback( $post ) {
		wp_nonce_field( 'artikal_info_data', 'artikal_info_nonce' );
		$this->generate_fields( $post );
	}

	/**
	 * Generates the field's HTML for the meta box.
	 */
	public function generate_fields( $post ) {
		$output = '<div class="artikal-all-fields" style="background-color:lightblue;">';

		foreach ( $this->fields as $field ) {	
			
			$cc = $field['value'];
			$label = '<label for="' . $field['id'] . '">' . $field['label'] . '</label>';
			$db_value = get_post_meta( $post->ID, 'artikal_info_' . $field['id'], true );
			

			switch ( $field['type'] ) {
				case 'checkbox':
				$input = sprintf(
					'<input %s id="%s" class="artikli-checkbox" name="%s" type="%s" value="'. $cc .'">',
					$db_value === $cc ? 'checked="checked"' : '',
					$field['id'],
					$field['id'],
					$field['type']
				);
				break;
				case 'textarea':
				$input = sprintf(
					'<textarea id="%s" name="%s" rows="1">%s</textarea>',
					$field['id'],
					$field['id'],
					$db_value
				);
				break;
				default:
					$input = sprintf(
						'<input class="components-text-control__input" id="%s" name="%s" type="%s" value="%s">',
						$field['id'],
						$field['id'],
						$field['type'],
						$db_value
					);
			}
			
			switch ( $field['type'] ) {
				case 'checkbox':						
					$output .= '<div class="'. $cc .'">';					
					$output .= $input;
					$output .= $label;
					$output .= '</div>';					
				break;
				default :
					$output .= '<div id="color-field-'. $field['id'] .'" class="artikal-field-wrap '. $none .'" >';
					$output .= '<span class="minus button"></span>';
					$output .= $label;					
					$output .= $input;
					$output .= '<span class="add button"></span>';
					$output .= '</div>';
			}	
			
			
		}
		
		
		
		$output .= '</div>';
		echo $output;
	}

	/**
	 * Hooks into WordPress' save_post function
	 */
	public function save_post( $post_id ) {
		if ( ! isset( $_POST['artikal_info_nonce'] ) )
			return $post_id;

		$nonce = $_POST['artikal_info_nonce'];
		if ( !wp_verify_nonce( $nonce, 'artikal_info_data' ) )
			return $post_id;

		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
			return $post_id;

		foreach ( $this->fields as $field ) {
			if ( isset( $_POST[ $field['id'] ] ) ) {
				switch ( $field['type'] ) {
					case 'email':
						$_POST[ $field['id'] ] = sanitize_email( $_POST[ $field['id'] ] );
						break;
					case 'text':
						$_POST[ $field['id'] ] = sanitize_text_field( $_POST[ $field['id'] ] );
						break;
				}
				update_post_meta( $post_id, 'artikal_info_' . $field['id'], $_POST[ $field['id'] ] );
			} else if ( $field['type'] === 'checkbox' ) {
				update_post_meta( $post_id, 'artikal_info_' . $field['id'], '0' );
			}
		}
	}
}
new Artikal_Meta_Box;

This is my javascript snippet

$('.artikli-checkbox').change(function() {
		var checkbox = $(this);
		if( checkbox.is(':checked') ) {
			$( '#' + checkbox.val() ).show();
		} else {
			$( '#' + checkbox.val() ).hide();
		}
	});