Отключение selectOneListbox в простых лицах с помощью jquery

Question

У меня есть 5 selectOneListbox на моей странице рядом друг с другом.Основываясь на том, что пользователь выбирает в первом списке, я хочу отключить несколько элементов из некоторых списков и полностью отключить некоторые списки ..

jQuery(".commentClass ul.ui-selectlistbox-list li:eq(4)").on("click",function(event){
                    jQuery('.callTypeClass').addClass('ui-state-disabled');
                    jQuery('.phoneClass').addClass('ui-state-disabled');
                    jQuery('.disputeClass').addClass('ui-state-disabled');
                    jQuery('.placementClass').addClass('ui-state-disabled');

                });

В то время как вышеупомянутый jquery добавляет 'ui-state-disabled'класс для всего listBox, но я все еще могу щелкнуть элементы внутри них.Лучшее, что он делает, - это размытие содержимого.

Как полностью отключить списки, чтобы пользователь не мог щелкнуть ни по одному элементу (чего я могу достичь, если у меня жесткий код disabled = "true"" в списках). prop ('disabled', true); тоже не работает.И как мне управлять включением / отключением на уровне элемента вместо полного списка.

Sample ListBox

<p:selectOneListbox  id="basic1" widgetVar='commmentWidget'  styleClass="commentClass" value="#{decisionTreeBean.option1}">
                        <f:selectItems  value="#{decisionTreeBean.commentType}" var="X"
                            itemLabel="#{X}" itemValue="#{X}"/>
                    </p:selectOneListbox>