Setting styleclass for checkbox used in PrimeFaces dataTable-CodePudding

I have a PrimeFaces DataTable that offers row selection via a checkbox, like this:

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

I would like to add the class "ignoreLock" to those checkboxes. When I try it like above it does not work, when I inspect the checkboxes in the browser they don't have the styleclass.

How to do this?

EDIT: Maybe some more context is needed here. The project I am working on uses this javascript function to lock some UI-components when some backend condition is met:

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

Giving a component the class "ignoreLock" prevents this locking. Please understand that I am working as part of a bigger project and that I cannot make major changes to this function. I want to add this class to the checkboxes of my datatable. However, when I try it like in the code above the generated HTML looks like this:

<td role="gridcell" >
    <div >
        <div >
            <input type="checkbox" name="..." aria-checked="false">
        </div>
        <div  disabled="disabled">
            <span >
            </span>
        </div>
    </div>
</td>

So the class is added to the row containing the checkbox and not the checkbox itself, which is why the checkbox is being disabled by the lock function.

CodePudding user response：

Instead of the selector you are using now:

.ui-chkbox-box

you can use this selector to exclude checkboxes which are row selectors:

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

See: