JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ginput_container ginput_container_checkbox"><ul class="gfield_checkbox" id="input_167_1"><li class="gchoice gchoice_167_1_1">
								<input class="gfield-choice-input" name="input_1.1" type="checkbox" value="Red" id="choice_167_1_1">
								<label for="choice_167_1_1" id="label_167_1_1">Red</label>
							</li><li class="gchoice gchoice_167_1_2">
								<input class="gfield-choice-input" name="input_1.2" type="checkbox" value="Blue" id="choice_167_1_2">
								<label for="choice_167_1_2" id="label_167_1_2">Blue</label>
							</li><li class="gchoice gchoice_167_1_3">
								<input class="gfield-choice-input" name="input_1.3" type="checkbox" value="Green" id="choice_167_1_3">
								<label for="choice_167_1_3" id="label_167_1_3">Green</label>
							</li></ul></div>

JavaScript

jQuery( '#input_167_1 input[type="checkbox"]' ).on( 'click', function() {
	var $red   = jQuery( '#choice_167_1_1' );
  var $blue  = jQuery( '#choice_167_1_2' );
  var $green = jQuery( '#choice_167_1_3' );
  // Check Green if Rea & Blue are checked.
  if ( $red.is( ':checked' ) && $blue.is( ':checked' ) ) {
  	$red.prop( 'checked', false );
    $blue.prop( 'checked', false );
    $green.prop( 'checked', true );
  } 
  // Prevent Red & Blue from being checked if Green is checked.
  else if ( $green.is( ':checked' ) ) {
  	$red.prop( 'checked', false );
    $blue.prop( 'checked', false );
  }
} );