Override CSS from ui-disable class

Question

I have a navbar as footer.

The first element of navbar has the class ui-disabled not be possible to interact with it.

Here is the FIDDLE

HTML/Jquery

<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
            <div data-role="navbar" data-grid="b">
                    <ul>
                       <li class="ui-disabled"><a id="listSO_options">Opções</a></li>
                       <li><a class = "ui-btn-active  nav" href="#">menu</a></li>
                       <li><a class = "nav" href="#" id="listSO_btnDef" data-icon="gear">Definições</a></li>
                    </ul>
            </div>
</div><!-- footer -->

Question

As noted in the fiddle, the first element is more faded than the next two. It is possible, using CSS and keeping the first element with the class ui-disabled make it identical to the rest li's ?

In case I have been less explicit: it is possible to annul the CSS class characteristic ui-disabled?

Answer 1

The difference is that the disabled has opacity: .3;, Restoring opacity to 1 solves the problem.

Using

$('[data-role="navbar"] li:first').css('opacity', 1);

solves the problem.

jsFiddle: http://jsfiddle.net/u2d9ttym/6/

If you decide to apply cia CSS class you have to use !important; to override the rule. Using Javascript as I mentioned above is not necessary because applying the element has priority.