如何在 jqxGrid 的 2 个不同单元格中 link 复选框

Question

我想要满足以下条件的 2 列复选框。

如果 'A' 开启，那么 'B' 可以是 on/off 如果 'A' 关闭，则 'B' 也必须关闭

这是一个 fiddle，其中包含一组示例数据，但我不知道如何添加此功能。这本质上只是数据的前端验证，以防止用户意外创建 'impossible' 场景。我什至不确定从哪里开始自定义复选框。

var data = [{
  name: "Person1",
  A: true,
  B: true
}, {
  name: "Person2",
  A: true,
  B: false
}, {
  name: "Person3",
  A: false,
  B: false
}];

var source = {
  localdata: data,
  datafields: [{
    name: "name",
    type: "string"
  }, {
    name: "A",
    type: "bool"
  }, {
    name: "B",
    type: "bool"
  }],
  datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
  width: "100%",
  source: adapter,
  editable: true,
  columnsresize: true,
  sortable: true,
  filterable: false,
  columns: [{
    text: "Name",
    datafield: "name",
    align: 'center',
    width: 150,
    menu: false
  }, {
    text: "A",
    datafield: "A",
    align: 'center',
    columntype: 'checkbox',
    width: 150,
    editable: true,
    menu: false
  }, {
    text: "B",
    datafield: "B",
    align: 'center',
    columntype: 'checkbox',
    menu: false,
    editable: true
  }]
});

Answer 1

绑定 cellendedit 事件以在 Programmatic Editing

之后执行操作

$('#jqxgrid').on('cellendedit', function (event) {
    if (event.args.datafield == 'A' && event.args.value == false) {
        $("#jqxgrid").jqxGrid('setcellvalue', event.args.rowindex, 'B', false) //set value to false
        $("#jqxgrid").jqxGrid('setcolumnproperty', 'B', 'editable', false)//disable further editing
    } else if (event.args.datafield == 'A' && event.args.value == true) {
        // $("#jqxgrid").jqxGrid('setcellvalue', event.args.rowindex, 'B', true)
        $("#jqxgrid").jqxGrid('setcolumnproperty', 'B', 'editable', true) //enable editing
    }
});

如何在 jqxGrid 的 2 个不同单元格中 link 复选框

How to link check boxes in 2 different cells of jqxGrid

checkbox

jquery

jqxgrid