Disable Input column in Jqgrid

Question

$("#list").jqGrid({
    url: '/modulos/carga/cargaServiciosTarifa.ashx',
    datatype: 'xml',
    mtype: 'GET',
    colNames: ['Precio Dia', 'Precio Hora','Unidad'],
    colModel: [
              { name: 'preciodia', index: 'preciodia', width: 100, align: 'center', editable: true, sortable: false },
              { name: 'preciohora', index: 'preciohora', width: 400, align: 'center', editable: true, sortable: false },
              { name: 'Unidad', index: 'TSI_Unidad', width: 100, align: 'center',            editable: true, edittype: 'select',
                      editoptions: { value: "Dia:Dia;Hora:Hora" }, sortable: true }
              ],
autoencode: true,
pager: '#pager',
rowNum: 20,
sortname: 'preciohora',
sortorder: 'asc',
sortable: true,
autowidth: false,
width: 733,
height: -1,
shrinkToFit: true,
viewrecords: true,
gridview: true,
caption: 'Listado Servicios asociados a Tarifa',
postData: {tarId: tarId.val()},
editurl: '/modulos/carga/cargaServiciosTarifa.ashx'
});


//Paginador
        jQuery("#list").jqGrid('navGrid',
            '#pager',
            {
                alerttext: "Seleccione un precio.",
                add: true, addtitle: "Crear precio",
                del: true, deltitle: "Eliminar precio",
                edit: true, edittitle: "Modificar precio",
                search: false, searchtitle: "Búsqueda",
                refresh: true,
                cloneToTop: true
            },
            { width: 360, resize: false, closeAfterEdit: true, recreateForm: true, viewPagerButtons: true },
            { width: 360, resize: false, closeAfterAdd: true, recreateForm: true, viewPagerButtons: true },
            { }, //Delete action
            { closeAfterSearch: true, closeOnEscape: true }
        );

With two textboxs and one select option, and I want to know how can I disable the 'Precio Dia'(first textbox) column if I select the option 'Hora' of the select (thrid column), and the other way disable 'Precio Dia' if i select 'Hora' in the select! Is there a possible way to do this when I create or edit(no inline editing, I use navGrid)?

Have any property like a html disabled to can add to the colModel definition?

Thanks.

Answer 1

I think that you can define change handler on the select element. Inside of the handler you can disable or enable the first input field based on the current selected option in the select. Because you use form editing the id of the first input field will be the same as the name of the first column. Additionally you will need to make the same actions during initializing of the form. The corresponding code will looks like the following:

editoptions: {
    value: "Dia:Dia;Hora:Hora",
    dataInit : function (elem) {
        setTimeout(function () {
            $("#preciodia").prop("disabled", $(elem).val() === "Hora");
        }, 50);
    },
    dataEvents: [
        {
            type: 'change',
            fn: function (e) {
                $("#preciodia").prop("disabled", $(this).val() === "Hora");
            }
        }
    ]
},