how do I access an element outside the jqGrid? - css

Question

I have a button and a grid (using jqGrid) but wanted to disable the button that is off the grid when the user clicks the checkbox that is within the grid. How do I do?
I'm trying to do this in LoadComplete.
<table id="Grid"></table>
<div id="GridPager"></div>
<br />
<button id="btnDownload" disabled="disabled">Download Selected</button>
<iframe id="ifr" style="display: none"></iframe>
<script>
$(document).ready(function () {
// make jQuery UI button
$("#btnDownload").button();
$("#btnDownload").click(function () {
var selectedIDs = jQuery('#Grid').jqGrid('getGridParam', 'selarrrow');
$("#ifr").attr("src", "/Handler/ExportInvoiceHandler.ashx?selectedIDs=" + selectedIDs);
});
$("#Grid").jqGrid({
url: '/Handler/InvoiceHandler.ashx',
datatype: 'json',
autowidth: true,
height: "100%",
emptyRecords: "No records found",
colNames: ['PO', 'SKU', 'Status', 'Date', ''],
colModel: [
{ name: 'PO', width: 80, sortable: true, stype: 'string', resizable: false },
{ name: 'SKU', width: 200, sortable: true, stype: 'string', resizable: false },
{ name: 'Status', width: 100, sortable: true, stype: 'string', resizable: false },
{
name: 'Date', width: 80, sorttype: "date", sortable: true, align: 'center', resizable: false,
searchoptions: {
dataInit: function (element) {
$(element).datepicker({ dateFormat: 'mm/dd/yy' })
}
}
},
{ name: 'Id', width: 50, sortable: false, search: false, index: 'Id', editable: true, formatter: returnHyperLink, align: 'center', resizable: false },
],
loadComplete: function () {
$("input[type=checkbox]").click(function () {
var chkSelected = $("#Grid input[type='checkbox']:checked").length;
var btn = $("#btnDownload");
alert(btn);
if (chkSelected != 0) {
btn.removeAttr('disabled');
}
else {
btn.attr('disabled', 'disabled');
}
});
},
rowNum: 10,
rowList: [10, 20, 30],
pager: '#GridPager',
multiselect: true,
sortname: 'PO',
viewrecords: true,
sortorder: 'asc',
loadonce: true
}).navGrid('#GridPager', { add: false, edit: false, del: false, refresh: false, search: true, refresh: true }, {}, {}, {}, { multipleSearch: true }, { closeOnEscape: true });
});
function returnHyperLink(cellValue, options, rowdata, action) {
return "<a href='/Handler/ExportInvoiceHandler.ashx?Id=" + options.rowId + "' target='ifr'>Download</a>";
}
</script>