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

【问题标题】：How to change the label style of the disabled items from selectCheckboxMenu?如何从 selectCheckboxMenu 更改禁用项目的标签样式？
【发布时间】：2018-02-28 08:35:28
【问题描述】：

当itemDisabled 为真时，我的p:selectCheckboxMenu 会自动更改框样式，如下所示。但是，我希望 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，我没有这个问题。

【问题讨论】：

你有没有使用 CSS 来改变标签样式类
How do I override default PrimeFaces CSS with custom styles?的可能重复
嗨，安库什。不，没有 CSS 更改标签样式。
对不起，库克尔特杰。但这无济于事。我的问题比这更具体。

标签： jquery css primefaces jsf-2 jsf-2.2

【解决方案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 类分配给 <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 脚本开发者，你可以减少代码。但此代码应在页面加载后运行。

谢谢安库什

【讨论】：

【解决方案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。

这是结果：

【讨论】：

你的答案很简单。