当我加载页面时，一些复选框应该被禁用，用户不应该能够选择它们。例如，加载页面时，应禁用具有奇数“id”的行的复选框。但不应禁用整行，仅禁用复选框。我已经尝试弄清楚这个问题很长时间了，但找不到任何答案。提前致谢。 这是我的代码。
!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script type="text/javascript" src="pqgrid.min.js" ></script>
<!--Main javscript file to create the paramquery-->
<script type="text/javascript">
$(function () {
//state of the checkbox and row selection is being saved in state field.
var data = [
{ id: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
{ id: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
{ id: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
{ id: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
{ id: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
{ id: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
{ id: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3'},
{ id: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
{ id: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
{ id: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
{ id: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
{ id: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
{ id: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
{ id: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
{ id: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5'},
{ id: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
{ id: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
{ id: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
{ id: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
{ id: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
];
var obj = {
scrollModel: { autoFit: true },
numberCell: {show: false},
title: "Checkbox selections",
selectionModel: { type: null },
pasteModel: { on: false },
height: 'flex',
pageModel: { type: "local", rPP: 10 },
colModel:
[
{ title: "ID", width: 100, dataType: "integer", dataIndx: "id" },
{ title: "Company", width: 220, dataType: "string", dataIndx: "company" },
{ title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx: "revenues" },
{ title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx: "profits" },
{ title: "", dataIndx: "state", maxWidth: 30, minWidth: 30, align: "center",
cb: { header: true, all: false },
type: 'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable: false, editable: false,
display_checkbox: false
}
],
toolbar: {
items: [{
type: 'button',
label: 'Get Row ID of selected rows',
listeners: [{ 'click': function () {
var $grid = $(this).closest('.pq-grid');
var selarray = $grid.pqGrid('selection', { type: 'row', method: 'getSelection' });
var ids = [];
for (var i = 0, len = selarray.length; i < len; i++) {
var rowData = selarray[i].rowData;
ids.push(rowData.id);
}
alert(ids);
}
}]
}
]
},
dataModel: {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#grid_selection_checkbox").pqGrid(obj);
});
</script>
<body>
<div id="grid_selection_checkbox" style="margin:auto;"></div>
</body>
</html>
最佳答案
渲染网格后，jQuery 可以查找复选框。
您可以使用PQ Grid用于选择行的类。
.pq-grid-row是每行的类。.pq-grid-oddRow是奇数行的类。.pq-grid-title-row是标题行的类。
因此，要获取偶数行，您可以使用所有行选择器和 .not()选择器。
要定位复选框，请使用 attribute selector .
// Disable the columns checkboxes (check all)
$(".pq-grid-title-row [type='checkbox']").prop("disabled",true);
// Disable checkboxes on even rows.
$(".pq-grid-row:not(.pq-grid-oddRow) [type='checkbox']").prop("disabled",true);
// Disable checkboxes on odd rows.
$(".pq-grid-oddRow [type='checkbox']").prop("disabled",true);
这是一个代码片段，其中奇数行上的复选框和“检查全部”列被禁用。
<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<!--link rel="stylesheet" href="pqgrid.min.css" />
<script type="text/javascript" src="pqgrid.min.js" ></script-->
<!-- I used CDNs here, since your relative paths to PQ Grid was not working here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pqGrid/2.4.1/pqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pqGrid/2.4.1/pqgrid.min.css" rel="stylesheet"/>
<!--Main javscript file to create the paramquery-->
<script type="text/javascript">
$(function () {
//state of the checkbox and row selection is being saved in state field.
var data = [
{ id: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
{ id: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
{ id: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
{ id: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
{ id: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
{ id: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
{ id: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3'},
{ id: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
{ id: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
{ id: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
{ id: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
{ id: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
{ id: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
{ id: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
{ id: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5'},
{ id: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
{ id: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
{ id: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
{ id: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
{ id: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
];
var obj = {
scrollModel: { autoFit: true },
numberCell: {show: false},
title: "Checkbox selections",
selectionModel: { type: null },
pasteModel: { on: false },
height: 'flex',
pageModel: { type: "local", rPP: 10 },
colModel:
[
{ title: "ID", width: 100, dataType: "integer", dataIndx: "id" },
{ title: "Company", width: 220, dataType: "string", dataIndx: "company" },
{ title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx: "revenues" },
{ title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx: "profits" },
{ title: "", dataIndx: "state", maxWidth: 30, minWidth: 30, align: "center",
cb: { header: true, all: false },
type: 'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable: false, editable: false,
display_checkbox: false
}
],
toolbar: {
items: [{
type: 'button',
label: 'Get Row ID of selected rows',
listeners: [{ 'click': function () {
var $grid = $(this).closest('.pq-grid');
var selarray = $grid.pqGrid('selection', { type: 'row', method: 'getSelection' });
var ids = [];
for (var i = 0, len = selarray.length; i < len; i++) {
var rowData = selarray[i].rowData;
ids.push(rowData.id);
}
alert(ids);
}
}]
}
]
},
dataModel: {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#grid_selection_checkbox").pqGrid(obj);
// Disable the columns checkboxes (check all)
$(".pq-grid-title-row [type='checkbox']").prop("disabled",true);
// Disable checkboxes on odd rows.
$(".pq-grid-oddRow [type='checkbox']").prop("disabled",true);
});
</script>
<body>
<div id="grid_selection_checkbox" style="margin:auto;"></div>
</body>
</html>关于javascript - 如何在jquery网格中为特定单元格(不是整行)呈现禁用的复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55344951/