为 PrimeFaces 数据表中使用的复选框设置样式类

Question

我有一个 PrimeFaces DataTable，它通过复选框提供行选择，如下所示：

<p:dataTable id="tabId" var="document" 
     rowKey="#{document.id}" 
     rowSelectMode="checkbox" 
     rowStyleClass="ignoreLock" tableStyleClass="ignoreLock" 
     value="#{bean.data}"> 
    
   ...
   <p:column selectionMode="multiple" styleClass="ignoreLock"/>
   ...
    
</p:dataTable>

我想将 class“ignoreLock”添加到这些复选框。 当我像上面那样尝试时它不起作用，当我检查浏览器中的复选框时它们没有样式类。

这个怎么做？

编辑：也许这里需要更多的上下文。 我正在处理的项目使用此 javascript function 在满足某些后端条件时锁定某些 UI 组件：

<p:outputPanel rendered="#{conditionView.conditionisMet()}">
                    function lock() {
                         $('input.ui-widget, .ui-inputfield, .ui-inputtextarea, .ui-button, .ui-chkbox-box').each(function() {
                            if (!$(this).hasClass('ignoreLock')) {
                                $(this).addClass('ui-state-disabled');
                                $(this).attr('disabled', 'disabled');
                                $(this).unbind();
                            }
                        });

                        $('.ui-selectonemenu-trigger, .sperre .ui-selectonemenu-label').each(function() {
                            if (!$(this).hasClass('ignoreLock')) {
                                $(this).addClass('ui-state-disabled');
                                $(this).unbind();
                            }
                        });
                    }

                    </script>
</p:outputPanel>

为组件提供 class“ignoreLock”可防止此锁定。 请理解我正在作为一个更大项目的一部分工作，我不能对这个 function 进行重大更改。我想将这个 class 添加到我的数据表的复选框中。 但是，当我像上面的代码那样尝试时，生成的 HTML 看起来像这样：

<td role="gridcell" class="ui-selection-column myStyleclass ui-sortable-handle">
    <div class="ui-chkbox ui-widget">
        <div class="ui-helper-hidden-accessible">
            <input type="checkbox" name="..." aria-checked="false">
        </div>
        <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-disabled" disabled="disabled">
            <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c">
            </span>
        </div>
    </div>
</td>

所以 class 被添加到包含复选框的行而不是复选框本身，这就是为什么复选框被锁 function 禁用的原因。

Answer 1

而不是您现在使用的选择器：

.ui-chkbox-box

您可以使用此选择器来排除作为行选择器的复选框：

.ui-chkbox-box:not(.ui-selection-column .ui-chkbox-box)

看：

• https://api.jquery.com/not-selector/
• CSS 否定伪类：父/祖先元素的 not()