JSFiddle - React, Tailwind, and code Playground

HTML

<select id="list" name="list" multiple="multiple">
  <option select disabled>-Gender-</option>
  <option value="A">Female</option>
  <option value="B">Male</option>
  <option value="C">Both</option>
</select>

JavaScript

const list = $('#list');
const both = list.find('option:last-child');

list.on('change', () => {
  if (list.find('option:selected').length === 2 &&
    !both.prop('selected')) {
    both.prop("disabled", true);
  }
});