Is there a way to display a checkbox as read-only using jquery-jtable?

Question

I'm using jTable to try and display some data. One of the fields is supposed to display a boolean value and I want to display it as a read-only checkbox, filled or empty depending on the value. Below are the options I have for that specific column, but the output at runtime is just an empty cell.

Returned: {
    title: 'Returned',
    width: '7%',
    sorting: false,
    type: 'checkbox',
    edit: false,
    values: { 'true': '', 'false': ''}
}

If I have edit set to true, then it displays the checkbox with the appropriate value. Does anyone have any info or advice on how to display a disabled checkbox? Thanks

Answer 1

JTable does not use html input elements in the list view. It only uses them in the Create and Edit dialogues. The values option are to show how to render true and false in the list view, and to toggle alongside the checkbox in the dialogues.

The text strings inside the values can of course be html, so you can use a span styled with a ui-icon, for ticks and crosses.

You could go further and use the display option to generate a disabled checked checkbox in the list view. It's not part of a form, so does not matter if it is disabled. Probably not a good idea to have it enabled, as this may lead uses to think they are editing the record.

actions: {
    listAction: function(postData, jtParams) {
        return {
            Result: "OK",
            Records: [
                { id:1, check0:true, check1:true, check2:true } ,
                { id:2, check0:false, check1:false, check2:false }
            ],
            TotalRecordCount: 2
        };
    },
    updateAction: function(postData, jtParams) {
        return {
            Result: "ERROR",
            Message: "Does not perform a data update"
        };
    }
},
fields: {
    id: {
        key: true,
        list: false,
        create: false,
        edit: false,
        },
    check0: {
        title: 'Default True/False',                   
        sorting: false,
        type: 'checkbox',
        edit: true,
        values: { 
                'true': 'Field is true',
                'false': 'Field is false'
                }
        },
    check1: {
        title: 'True/False using icons',                   
        sorting: false,
        type: 'checkbox',
        edit: true,
        values: { 
                'true': '<span class="ui-icon ui-icon-check"></span>',
                'false': '<span class="ui-icon ui-icon-close"></span>'
                }
        },
    check2: {
        title: 'True/false using ckeckbox',
        sorting: false,
        type: 'checkbox',
        edit: true,
        values: { 
                'true': 'Field is true',
                'false': 'Field is false'
                },
        display: function (data) {
            if (data.record.check2) {
                return '<input type="checkbox" checked="checked" disabled="disabled">';
            }
            else {
                return '';
            }
        }
    }
}