jQuery Spectrum color picker can't disable

Question

I added the Spectrum color picker to my website because I needed a color picker with opacity, and I have a checkbox to enable/disable which was working with a simple color picker, but here I cannot manage to disable it, even with the property.

I tried with changes to every Spectrum property or only with the disabled one but it doesn't work.

$(document).ready(function() {
  $('#bg_color').spectrum({
    type: "color",
    showPalette: false,
    showPaletteOnly: true,
    togglePaletteOnly: true,
    hideAfterPaletteSelect: true,
    showInput: true,
    disabled: true
  });

  $('#boolean_check_color').change(function() {
    if ($(this).prop('checked') == true) {
      $("#bg_color").spectrum({
        type: "color",
        hideAfterPaletteSelect: true,
        showInput: true,
        showInitial: true,
        disabled: true
      });
    } else if (!$(this).prop('checked')) {
      $("#bg_color").spectrum({
        type: "color",
        hideAfterPaletteSelect: true,
        showInput: true,
        showInitial: true,
        disabled: false
      });
    }
  })
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css" integrity="sha512-KuSX+43gVS5MEIJD2ewtrFPOHqC1PJnL8o2f5ciggPC0JUZ8XV0QXlfArO1mSzKkVFdRjsBDfrTU96C5SuRfqQ==" crossorigin="anonymous" />

<div class='p-2'>
  <label for="bg_color">Background color</label>
  <input id="bg_color" name="bg_color" value='#ffffff'>
  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <label for="boolean_check_color">or transparent &nbsp</label>
    <input type="checkbox" class="btn-check" id="boolean_check_color" autocomplete="off" name="boolean_check_color" checked>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js" integrity="sha512-1aNp9qKP+hKU/VJwCtYqJP9tdZWbMDN5pEEXXoXT0pTAxZq1HHZhNBR/dtTNSrHO4U1FsFGGILbqG1O9nl8Mdg==" crossorigin="anonymous"></script>

Answer 1

In the documentation for the Spectrum library there are enable and disable methods you can use to set the state of the control based on the checked property of the checkbox. Try this:

$(document).ready(function() {
  $('#bg_color').spectrum({
    type: "color",
    showPalette: false,
    showPaletteOnly: true,
    togglePaletteOnly: true,
    hideAfterPaletteSelect: true,
    showInput: true,
    disabled: true
  });

  $('#boolean_check_color').change(function(e) {
    $("#bg_color").spectrum(e.target.checked ? 'disable' : 'enable');
  })
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css" integrity="sha512-KuSX+43gVS5MEIJD2ewtrFPOHqC1PJnL8o2f5ciggPC0JUZ8XV0QXlfArO1mSzKkVFdRjsBDfrTU96C5SuRfqQ==" crossorigin="anonymous" />

<div class='p-2'>
  <label for="bg_color">Background color</label>
  <input id="bg_color" name="bg_color" value='#ffffff'>
  <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <label for="boolean_check_color">or transparent &nbsp</label>
    <input type="checkbox" class="btn-check" id="boolean_check_color" autocomplete="off" name="boolean_check_color" checked>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js" integrity="sha512-1aNp9qKP+hKU/VJwCtYqJP9tdZWbMDN5pEEXXoXT0pTAxZq1HHZhNBR/dtTNSrHO4U1FsFGGILbqG1O9nl8Mdg==" crossorigin="anonymous"></script>