jquerycssprimefacesprimefaces-datatable

Setting styleclass for checkbox used in PrimeFaces dataTable

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

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.

Solution

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