I have the following code (https://jsfiddle.net/bnzk6a4p/) which works fine. Basically, you click on a checkbox, the disabled button turns active and as soon as you uncheck all checkboxes, the button is disabled.
I tried putting the exact code in my code with above sample data and it worked fine. However, I am not sure why I am facing following issue when I am pulling the data via Ajax call (not sure if this is the issue):
My Issue:
I have to click two checkboxes to make the button active instead of one.
Here is my actual code (removed lot of stuff for breivity):
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" >
<link rel="stylesheet" href="js/style.css"/>
<link href="js/jquery.growl.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.bootstrap.css" type="text/css" />
<link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
</head>
<body style="background-color: #f1ecec;">
<!-- <body > -->
<div>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div id="jqxgrid"></div>
<div>
<span><button class="btn btn-success" id="jqxbutton">Submit</button></span>
<!-- <input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" /> -->
<div class="pull-right">
<strong>Note:Default date range (if nothing is selected from Start Year & End Year dropdown) will be of last 5 years.</strong>
</div>
</div>
</form>
<!-- END form testing-->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<script type="text/javascript" src="js/builder.js"></script>
<script type="text/javascript" src="scripts/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="scripts/jqwidgets/jqx-all.js"></script>
</body>
</html>
builder.js code below:
$(function(){
var envURL = "http://localhost:8080";
//Get the userId from the session storage
var storedItemsInSessionStorage = JSON.parse(sessionStorage.getItem("loggedInUser"));
if(storedItemsInSessionStorage === null){
console.log("Cannot retrieve anything from Session Storage. Please check if session storarage has required things needed to move forward.");
}
else {
var userId = storedItemsInSessionStorage.userId;
}
console.log("Printing retrieved userId below");
console.log(userId);
var stbuidata;
$.ajax({
type: "get",
url: ""+envURL+"/MyServices/upms/getInfo",
contentType: 'application/json',
async: false,
cache: false,
success: function(data) {
stbuidata = data;
}
});
var source = {
localdata: stbuidata,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
$("#jqxgrid").jqxGrid({
theme: 'bootstrap',
width: 1500,
autoheight: true,
editable: true,
source: dataAdapter,
selectionmode: 'multiplerows',
columns: [{
text: 'Action',
datafield: 'checked',
width: 100,
columntype: 'checkbox'
}, {
text: 'Standard Data Output (Short Name)',
datafield: 'shortName',
width: 100
},
{
text: 'Standard Data Output (Long Name)',
datafield: 'longName',
width: 100
},
{
text: 'Risk Level',
datafield: 'riskLevel',
width: 100
},
{
text: 'isDateEligible',
datafield: 'isDateEligible',
width:100
},
{
text: 'Start Year',
width: 120,
datafield:'fromYear' , columntype: 'dropdownlist', editable: true,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
var isDateEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "isDateEligible");
if(isDateEligibleValue == "N") {
return "N/A";
}
else {
return '' + value + '';
}
},
createeditor: function (row, column, editor) {
let list = ['2010', '2011', '2012' ,'2013','2014','2015',
'2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, });
},
initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
var isDateEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "isDateEligible");
$(editor).on('change', function (event) {
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
var type = args.type; // keyboard, mouse or null depending on how the item was selected.
$("#jqxgrid").jqxGrid('setcellvalue', row, "fromYear", value);
$("#jqxgrid").jqxGrid('endcelledit', row, "fromYear", true);
var endyearValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "endyearValue");
var fromYear = $('#jqxgrid').jqxGrid('getcellvalue', row, "fromYear");
if (endyearValue !== null && parseInt(fromYear) > parseInt(endyearValue)) {
$("#jqxgrid").jqxGrid('showvalidationpopup', row, 'fromYear', "End year must not be less than the start year!");
let validationPopup= document.querySelector('.jqx-grid-validation');
validationPopup.id = row;
}
else if (parseInt(fromYear) > parseInt(endyearValue)) {
let validationPopup= document.getElementById(row);
if ( validationPopup !== null ) {
validationPopup.remove();
}
}
}
});
if (isDateEligibleValue == "N") {
editor.jqxDropDownList({selectedIndex: null, disabled: true, placeHolder:"N/A" });
}
else {
editor.jqxDropDownList({ disabled: false});
}
},
},
{
text: 'End Year',width: 120, datafield:'toYear' , columntype: 'dropdownlist', editable: true,
//cellsrenderer: iconrenderer,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
var isDateEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "isDateEligible");
if(isDateEligibleValue == "N") {
return "N/A";
}
else {
return '' + value + '';
}
},
createeditor: function (row, column, editor) {
let list = ['2010', '2011', '2012' ,'2013','2014','2015',
'2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, });
},
initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
var isDateEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "isDateEligible");
if (isDateEligibleValue == "N") {
editor.jqxDropDownList({selectedIndex: null, disabled: true, placeHolder:"N/A" });
}
else {
editor.jqxDropDownList({ disabled: false});
}
$(editor).on('change', function (event) {
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
var type = args.type; // keyboard, mouse or null depending on how the item was selected.
$("#jqxgrid").jqxGrid('setcellvalue', row, "toYear", value);
$("#jqxgrid").jqxGrid('endcelledit', row, "toYear", true);
var toYear = $('#jqxgrid').jqxGrid('getcellvalue', row, "toYear");
var fromYear = $('#jqxgrid').jqxGrid('getcellvalue', row, "fromYear");
if (fromYear !== null && parseInt(toYear) < parseInt(fromYear)) {
$("#jqxgrid").jqxGrid('showvalidationpopup', row, 'toYear', "End year must not be less than the start year!");
let validationPopup= document.querySelector('.jqx-grid-validation');
validationPopup.id = row;
}
else if (parseInt(toYear) > parseInt(fromYear)) {
let validationPopup= document.getElementById(row);
if ( validationPopup !== null ) {
validationPopup.remove();
}
}
}
});
},
}
]
});
$("#jqxgrid").bind('cellendedit', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}
});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows');
var selectedRows = rows.filter(x => x.available)
for(let i = 0; i < selectedRows.length; i++) {
if (selectedRows[i].isDateEligible === "N" && selectedRows[i].fromYear === null && selectedRows[i].toYear === null ) {
selectedRows[i].fromYear = -1;
selectedRows[i].toYear = -1;
}
else if (selectedRows[i].isDateEligible === "Y" && selectedRows[i].fromYear === null && selectedRows[i].toYear === null ) {
selectedRows[i].fromYear = '2015';
selectedRows[i].toYear = '2021';
}
}
selectedRows.forEach(row => $("#jqxgrid").jqxGrid('setcellvalue', row.boundindex, 'available', false));
$('#jqxgrid').jqxGrid('clearselection');
var selectedRows = $('#jqxgrid').jqxGrid('getselectedrowindex');
checkIfThereAreSelectedRows(selectedRows);
});
$("#jqxgrid").on('cellvaluechanged', function (event)
{
var rows = $('#jqxgrid').jqxGrid('getrows');
var selectedRows = rows.filter(x => x.available)
// event arguments.
var args = event.args;
// column data field.
var datafield = event.args.datafield;
// row's bound index.
var rowBoundIndex = args.rowindex;
// new cell value.
var value = args.newvalue;
// old cell value.
var oldvalue = args.oldvalue;
if (datafield === 'available') {
if( selectedRows.length <= 0){
document.getElementById('jqxbutton').disabled =true;
}
}
});
var selectedRows = $('#jqxgrid').jqxGrid('getselectedrowindex');
function checkIfThereAreSelectedRows(selectedRows) {
if (selectedRows === -1 ) {
document.getElementById('jqxbutton').disabled =true;
}
else {
document.getElementById('jqxbutton').disabled = false;
}
}
checkIfThereAreSelectedRows(selectedRows);
$('#jqxgrid').on('rowselect', function (event)
{
var selectedRows = $('#jqxgrid').jqxGrid('getselectedrowindex');
checkIfThereAreSelectedRows(selectedRows);
});
})