jQuery Spectrum 颜色选择器无法禁用

Question

我将 Spectrum 颜色选择器添加到我的网站，因为我需要一个具有不透明度的颜色选择器，并且我有一个用于启用/禁用的复选框，它正在使用一个简单的颜色选择器，但在这里我无法设法禁用它，即使使用属性。

我尝试更改每个 Spectrum 属性或仅更改禁用的属性，但它不起作用。

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

在 Spectrum 库的 documentation 中，有 enable 和 disable 方法可用于根据复选框的 checked 属性设置控件的状态。试试这个：

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

Answer 2

这是我的版本。由于一些unsolved issues，花了一些时间找出正确的方法

但与manual相比，它们无关紧要

我建议你在加载时测试复选框的选中状态

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