JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<select class="selectpicker disable-example">
  <option value="Mr.">Mr.</option>
  <option value="Mrs.">Mrs.</option>
  <option value="Ms.">Ms.</option>
  <option value="Dr.">Dr.</option>
  <option value="Prof.">Prof.</option>
  <option value="Rev.">Rev.</option>
  <option data-divider="true"></option>
  <option value="Air Cdre.">Air Cdre.</option>
  <option value="Brgdr.">Brgdr.</option>
  <option value="Capt.">Capt.</option>
  <option value="Cmdr.">Cmdr.</option>
  <option value="Col.">Col.</option>
  <option value="Dame">Dame</option>
  <option value="Flt. Lt.">Flt. Lt.</option>
  <option value="Group Capt.">Group Capt.</option>
  <option value="Judge">Judge</option>
  <option value="Lady">Lady</option>
  <option value="Lord">Lord</option>
  <option value="Lt.-Cmdr.">Lt.-Cmdr.</option>
  <option value="Lt.-Col.">Lt.-Col.</option>
  <option value="Maj.-Gen.">Maj.-Gen.</option>
  <option value="Major">Major</option>
  <option value="Miss">Miss</option>
  <option value="Rear Admrl.">Rear Admrl.</option>
  <option value="Revd Canon">Revd Canon</option>
  <option value="Revd. Father">Revd. Father</option>
  <option value="Rt. Hon. Lord">Rt. Hon. Lord</option>
  <option value="Sir">Sir</option>
  <option value="The Hon.">The Hon.</option>
  <option value="The Hon. Mrs">The Hon. Mrs</option>
  <option value="Viscount">Viscount</option>
  <option value="Wng. Cmdr.">Wng. Cmdr.</option>
</select>

<button class="btn btn-default ex-disable">Disable</button>
<button class="btn btn-default ex-enable">Enable</button>

JavaScript

$('.selectpicker').selectpicker({
  liveSearch: true
});

$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});

$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});