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>

score 0 · Accepted Answer · answered Apr 29 '21 at 07:55

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>

Thanks man, it is working. Since my english is not perfect I might pass throught some informations. I have a question here: is the e argument passed in function the checkbox tag ? So you target the checked attribute ? — Kiji_T, Apr 29 '21 at 08:00
`is the e argument passed in function the checkbox tag` it's the Event object that's raised. The `target` property is a reference to the element which raised the event - in this case the checkbox — Rory McCrossan, Apr 29 '21 at 08:33

mplungjan · Answer 2 · 2021-04-29T08:10:15.047

Here is my version. Took some time to figure out the correct method due to some unsolved issues

but they were irrelevant compared to the manual

I suggest you test the checked state of the checkbox at load

$(document).ready(function() {
  const $chk = $('#boolean_check_color');
  const $bg  = $("#bg_color");
  const dis = $chk.prop("checked") 
  const setState = disable => $bg.spectrum(disable ? "disable" : "enable");
 
  $('#bg_color').spectrum({
    type: "color",
    showPalette: false,
    showPaletteOnly: true,
    togglePaletteOnly: true,
    hideAfterPaletteSelect: true,
    showInput: true,
  });
  setState(dis)
  $chk.on("click", function() {
     setState(this.checked)
  })
});

<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>

OK so it's safer with this method is it ? By the way, when I'm changing the color with the picker, the case where my color is supposed to show keep to white color. Do I have to link the value attribute of the tag somewhere or it is anything else. — Kiji_T, Apr 29 '21 at 08:13
I do not know what you mean. Please add some code to show what you mean — mplungjan, Apr 29 '21 at 08:20
Look in you're code snippet, when I change color from the picker, the little square stay white for any reason. — Kiji_T, Apr 29 '21 at 08:22

jQuery Spectrum color picker can't disable

2 Answers2