Disable buttons and navbar buttons on pageinit

Disable buttons and navbar buttons on pageinit

Hi I would like to enable/disable buttons (including navbar buttons) on pageinit based on result from ajax call. Is there away to handle button like this? Here is my code

<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<a href="../Portal.aspx" rel="external" data-icon="home">Portal</a>
<h1>Edit Custom Request</h1>
<a data-icon="bars" href='#popHeadMenu' data-inline='true'>
<div id="popHeadMenu" style='visibility: hidden; height: 20px; background-color: #336699; padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px; margin-top: 0px;'>
<ul id="lstHeadMenu" data-mini="true" style='height: 20px; padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px; margin-top: -2px' data-theme="b">
<li id='lstMenu1' style='color:White; font-weight:normal; height: 20px; padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px;'>Menu
<ul style='width: 200px;'>
<li id='liAddRequest'>Add Custom Request</li>
<li id='liViewRequests'>View Requests</li>
<li id='liViewStreetPlates'>View Street Plate Requests</li>
</ul>
</li>
</ul>
</div>
</a>
/div>
<div data-role="content" id="content" data-theme="b">
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="a">
<ul id="barFooter">
<li><a id="btnOK" href="#">Save</a></li>
<li><a id="btnCancel" href="#">Cancel</a></li>
</ul>
</div>
<div>
<script type="text/javascript">
$(document).on('pageinit', function () {
GetSRQRequestByRequestID(200).success(function (data) {
var obj = jQuery.parseJSON(data.d);
if (obj) {
$('#btnOK').navbar("disabled", true);
}
else {
$('#btnOK').navbar("disabled", false);
}
});
function querySt(Key) {
var url = window.location.href;
KeysValues = url.split(/[\?&]+/);
for (i = 0; i < KeysValues.length; i++) {
KeyValue = KeysValues[i].split("=");
if (KeyValue[0] == Key) {
return KeyValue[1];
}
}
}
});
</script>
</div>
</body>