如何以自定义方式呈现 CheckboxGroup（或任何其他元素）？答案

【问题标题】：How to render a CheckboxGroup (or any other element) in a custom way?如何以自定义方式呈现 CheckboxGroup（或任何其他元素）？
【发布时间】：2018-10-01 09:47:06
【问题描述】：

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

这只是一个使用案例的示例。

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

【问题讨论】：

你只能使用 Javascript 来做到这一点
@gerard 好的，实际上我要问的是散景中是否存在某种机制来继承呈现该对象的模板，以便使用我的自定义模板进行更改。

标签： python css python-3.x templates bokeh

【解决方案1】：

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

首先我需要等到 Bokeh Server 加载完毕。所有元素必须已经渲染。所以我从this answer应用了一些解决方法
然后我使用python属性css_classes和CSS样式display: none;隐藏了散景生成的原始元素

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

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

最后我在原来的隐藏元素上添加了一个触发事件的事件：

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

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

【讨论】：