Embedding command button inside <li>

Question

I am working on pagination functionality which involves custom UI. I need to have disable functionality within the pagination(eg: next page button should be disabled if the user is on the last page). The catch is I have to use predefined html/css format. The existing one has something of the following sort:

    <div class="pagination _padtop30">
    <ul>
        <li class="arrow first-page"><a href="#">Go to first page</a></li> 
        ....
   </ul>
   </div>

Now I tried using command button inside the <li> tags , but it did not work (could not produce the css effects). While on Using command link inside <li> tags the css effects were replicated but I realised i cannot use disable attribute with commandlink . Similarly with outputlink I cannot use action attribute. What is the way out?

Answer 1

Try defining a css class as defined here.

.not-active {
   pointer-events: none;
   cursor: default;
}

Then in your link tags, you can conditionally apply this class:

<apex:commandLink styleClass="{!IF(someCondition, 'not-active', '')}" />