JSFiddle - React, Tailwind, and code Playground

by suraj mahajan

HTML

<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<select data-placeholder="Your Favorite Type of Bear" style="width: 350px; " class="chosen-select">
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option>Brown Bear</option>
            <option>Giant Panda</option>
            <option selected="">Sloth Bear</option>
            <option disabled="">Sun Bear</option>
            <option>Polar Bear</option>
            <option disabled="">Spectacled Bear</option>
</select>

<button class="disable-chosen">disable chosen</button>

JavaScript

$(".chosen-select").chosen();

$(".disable-chosen").on('click', function (event) {
    event.preventDefault();
    $(".chosen-select").prop('disabled', true).trigger('chosen:updated');
    $(".disable-chosen").off('click');
});