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

Question

My p:selectCheckboxMenu automatically changes the box style when itemDisabled is true as you can see below. However, I would like the itemLabel style changes as well for disabled items. How to do that?

<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.: with p:selectManyMenu, I don't have this problem.

Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Kukeltje, Sep 19 '17 at 15:52
Sorry, Kukeltje. But it doesn't help. My question is more specific than that. — Marcel, Sep 19 '17 at 16:35

score 1 · Accepted Answer · edited Sep 23 '17 at 18:57

1

I could solve my problem using 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');
    });
}

Once I have included changeDisabledItemColor() function, I just needed to add onShow="changeDisabledItemColor()" to p:selectCheckboxMenu.

This is the result:

edited Sep 23 '17 at 18:57

halfer

19,824
17
99
186

answered Sep 21 '17 at 12:44

Marcel

2,810
2
26
46

Your answer is very simple. – ankush yadav Sep 28 '17 at 06:42

ankush yadav · Answer 2 · 2017-09-20T06:18:06.680

The HTML output generated by The above code is below

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

The difference between two element is ui-state-disabled class only.

Now we need one simple java script which go throw all <li> element and look for that CSS class if found we come on outer HTML and then we can assign to our custome CSS class to <label>.

Our Java Script code should run after page load. This is just and idea, it will work, we need some time to implement and some level of java script.

If you have any suggestion please write down.

I am trying to write java script for that once it done will post here.

Edited:

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

I am not java script developer you may reduce the code. but this code should run after page load.

thanks Ankush

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

2 Answers2