python - 如何以自定义方式呈现 CheckboxGroup(或任何其他元素)？

Question

Bokeh 像这样渲染复选框

<div class="bk-bs-checkbox">
    <label>
        <input type="checkbox" value="0">
        Label text
    </label>
</div>

但我想根据输入状态选择标签 :focus, :disabled, :checked, ...

由于没有 CSS 父级选择器，我该如何以自定义方式呈现复选框？我想避免使用 JavaScript。如果复选框呈现为以下代码，则自定义起来会更容易:

<div class="bk-bs-checkbox">
    <input type="checkbox" value="0">
    <label>
        Label text
    </label>
</div>

我可以使用此 CSS 代码根据复选框状态选择标签:

.bk-bs-checkbox input[type="checkbox"]:disabled + label::after {
    background-color: red,
}

这只是展示一种使用情况的示例。

有没有简单的方法可以做到这一点？实际上，我正在 bokeh 中寻找某种机制来继承呈现该对象的模板，以便使用我的自定义模板对其进行更改。

Answer 1

好吧，我终于找到了一个不是很干净但有效的解决方法。基本上我隐藏了原始元素并创建了自己的自定义控件。我按照@Gerard 的建议使用了 JavaScript。

1. 首先，我需要等到 Bokeh 服务器加载完毕。所有元素必须已经呈现。所以我应用了 this answer 中的一些解决方法

2. 然后我使用 python 属性 css_classes 和 CSS 样式隐藏了由 bokeh 生成的原始元素 display: none;

3. 我已经通过 JavaScript 创建了元素(实际上我已经启用了 jQuery)。这也可以使用 Bokeh 模板来完成。就我而言，我发现这样更方便。然后我在原始元素之前添加了该元素。

   var new_cb = $('<div>', {
       class: 'abc-checkbox abc-checkbox-primary',
   });
   new_cb.append(
       $('<input>', {
           id: 'id_new_cb',
           type: 'checkbox'
       })
   );
   new_cb.append(
       $('<label>', {
           for: 'id_new_cb',
           text: 'Custom element'
       })
   );
   $('.original_cb').before(new_cb);
   

4. 最后我添加了一个事件来触发原始隐藏元素上的事件:

   $('#id_new_cb').change(function() {
       if(this.checked) {
           $('.original_cb input').click();
       } else {
           $('.original_cb input').click();
       }
   });
   

可以对其余元素做类似的事情。如果您只想更改几个元素，这很有用。否则，这将变得有点麻烦。