jQM 1.4 disable lisitem link

li a disabled in jquery

by Ankit Patidar

HTML

<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">
<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <ul id="theList" data-role="listview" data-inset="true">
            <li><a href="#">
        <img src="http://lorempixel.com/80/80/food/1/" />
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>

            </li>
            <li><a href="#">
        <img src="http://lorempixel.com/80/80/food/2/" />
    <h2>Warning</h2>
    <p>Hot Chip</p></a>

            </li>
            <li><a href="#">
        <img src="http://lorempixel.com/80/80/food/3/" />
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p></a>

            </li>
        </ul>
        <button id="btnClear">Clear Disabled</button>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content"></div>
    <div data-role="footer"></div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function () {
    $("#theList li a").on("click", function () {
        $("#theList li a").addClass("ui-state-disabled");
        $(this).removeClass("ui-state-disabled");
    });

    $("#btnClear").on("click", function () {
        $("#theList li a").removeClass("ui-state-disabled");
    });
});