如何从selectCheckboxMenu更改禁用项目的标签样式？

Question

我p:selectCheckboxMenu会在itemDisabled为真时自动更改框样式，如下所示。但是，我希望itemLabel样式更改也适用于已禁用的项目。怎么做？

<p:selectCheckboxMenu
    id="horario"
    value="#{clienteMB.horariosSelecionados}"
    label="Selecione"
    filter="true"
    filterMatchMode="startsWith"
    required="true"
    requiredMessage="Horário: campo obrigatório."
    converter="MultiSelectEntityConverter"
    style="width:100% !important">
    <f:selectItems
        itemDisabled="#{not empty consulta.datamarc}"
        value="#{clienteMB.horarioList}"
        var="consulta"
        itemLabel="#{consulta.dataHoraFormatted()}"
        itemValue="#{consulta}">
    </f:selectItems>
</p:selectCheckboxMenu>

PS。：p:selectManyMenu，我没有遇到这个问题。

Answer 1

以上代码生成的HTML输出位于

之下

<li class="ui-selectcheckboxmenu-item ui-selectcheckboxmenu-list-item ui-corner-all ui-selectcheckboxmenu-unchecked">
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible"><input role="checkbox" readonly="readonly" aria-checked="false" type="checkbox"></div>
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-disabled">
<span class="ui-chkbox-icon ui-icon ui-icon-blank"></span>
</div>
</div>
<label>A</label>
</li>

<li class="ui-selectcheckboxmenu-item ui-selectcheckboxmenu-list-item ui-corner-all ui-selectcheckboxmenu-unchecked">
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible"><input role="checkbox" readonly="readonly" aria-checked="false" type="checkbox"></div>
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
<span class="ui-chkbox-icon ui-icon ui-icon-blank"></span>
</div>
</div>
<label>C</label>
</li>

两个元素之间的差异仅为ui-state-disabled类。

现在我们需要一个简单的java脚本，它抛出所有<li>元素并查找该CSS类，如果发现我们来自外部HTML，那么我们可以将我们的CSS CSS类分配给<label>。

我们的Java Script代码应在页面加载后运行。 这只是想法，它会起作用，我们需要一些时间来实现和某种程度的java脚本。

如果您有任何建议，请写下来。

我正在尝试编写java脚本，一旦完成将在此处发布。

<强>编辑：

<script type="text/javascript">

var lis = document.getElementById("myDiv").getElementsByTagName("li");
  for(var i=0; i<lis.length;i++){
    var innerdiv = lis[i];
    var aa = lis[i].getElementsByClassName("ui-state-disabled");
    if(aa.length == 1){

lis[i].classList.add('test');

}
}
</script>

我不是java脚本开发人员，你可以减少代码。但是此代码应该在页面加载后运行。

感谢 Ankush

Answer 2

我可以使用jQuery解决我的问题。

function changeDisabledItemColor() {
    jQuery("div.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default.ui-state-disabled").parent().parent().find('label').each(function(index) {
        jQuery(this).css('opacity','0.35');
    });
}

我添加changeDisabledItemColor()功能后，我只需将onShow="changeDisabledItemColor()"添加到p:selectCheckboxMenu。

结果如下：