如何从 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-disabledclass

现在我们需要一个简单的 java 脚本，它会抛出所有 <li> 元素并寻找那个 CSS class 如果找到我们就在外部 HTML 然后我们可以分配给我们的客户 CSS class 到 <label>.

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

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

我正在尝试为此编写 java 脚本，完成后将 post 放在这里。

已编辑：

<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 脚本开发人员，您可以减少代码。但是此代码在页面加载后应该运行。

谢谢安库什

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。

这是结果：

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

How to change the label style of the disabled items from selectCheckboxMenu?

css

jquery

primefaces

jsf-2

jsf-2.2