JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<form>
  <button id="disableButtonId" type="button">Disable selectpicker</button>
  <button id="enableButtonId" type="button">Enable selectpicker</button>
  <select id="selectpickerId" class="selectpicker" multiple name="select" title="Select option">
    <option value=1>@Option 1</option>
    <option value=2>@Option 2</option>
    <option value=3>@Option 3</option>
    <option value=4>@Option 4</option>
  </select>	
  <button type="button" name="save">Save</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<script>
$('#disableButtonId').on('click', function(e) {
  $(".dropdown-toggle").prop('disabled', true); //disable button
});

$('#enableButtonId').on('click', function(e) {
  $(".dropdown-toggle").prop('disabled', false); //enable it
});
//for testing(to know if value gets pass or not if disabled.)
//select some value inside selectpicker -> click on disable button ->then click on save
$('[name=save]').on('click', function(e) {
var str = $(this).closest("form").serialize()
  alert()
});
</script>