JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="select2.min.css">
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
Location: <select id="location" multiple="multiple" style="width: 300px">
<option>New York</option>
<option>Hong Kong</option>
<option>Amsterdam</option>
</select>
<br>
<label>No city:<input id="noCity" type="checkbox"></label>

JavaScript

$('#location').select2({
    placeholder: 'Enter a city'
});

$("#noCity").click(function () {
        if (jQuery(this).prop("checked")) {
            jQuery("#location")
                .prop("disabled", this)
                .attr("placeholder", '', this)
                .val('', this)
            ;
        } else {
            jQuery("#location")
                .prop("disabled", false)
                .attr("placeholder", 'Enter the name of the city')
                .val('')
            ;
        }
    });

if ($('#noCity').is(':checked')) {
        jQuery('#location')
            .prop('disabled', this)
            .attr('placeholder', '')
            .val('');
    }