Check Uncheck , check boxes inside a jqgrid or toggle

Question

I have this code below for my jq Grid

function LeaveHalfDay() {
    var url1 = URL

    $("#LeaveHalfDayDataEntryList").jqGrid({
        url: url1,
        datatype: 'json',
        mtype: 'POST',
        colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
        colModel: [
                { name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },          
                {name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
                { name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
                { name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
                { name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 70, align: 'left' }           
          ],
        pager: $('#LeaveHalfDayDataEntryPager'),
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: '',
        sortorder: '',
        viewrecords: true,
        imgpath: '/Content/themes/redmond/images/',
        height: '100%',
        loadComplete: function (result, rowid) {
            var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
            var len = ids.length, newLine;
            if (len < 5) {
                AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
            }
            $("#LeaveHalfDayDataEntryPager").css("width", "auto");
            $("#LeaveHalfDayDataEntryPager .ui-paging-info").css("display", "none");
        }
    });
    return false;
}

And this one is to click the check box name (cbox_leave_half)

$('.cbox_leave_half').live('click', function (e) {
    var tr = $(e.target).closest('tr');        
    var target = $(e.target).is(':checked');
    HalfDayrowsObj[tr[0].id].HalfDay = $(e.target).is(':checked'); 
    _hashalfday = _hashalfday + 1;
    var EmployeeId = $("#hidEmployeeId").val();
    var StartDate = $("#LSDate").val();
    var EndDate = $("#LEDate").val();
    var noofdays = $("#txtNoDays").val();
    if (StartDate != "" && EndDate != "") {

        if (HalfDayrowsObj[tr[0].id].HalfDay == true) {
            NoOfHalfDay = NoOfHalfDay + 4;
            ComputeTotalDayHourLeave(EmployeeId, StartDate, EndDate, NoOfHalfDay);
            noofdays = parseFloat(noofdays) - parseFloat('.5');
            $("#txtNoDays").val(noofdays);
            $("#hidNoofDays").val(noofdays);
            $("#txtNoHrs").val(noofdays * 8);
        }
        else {
            NoOfHalfDay = NoOfHalfDay - 4;
            ComputeTotalDayHourLeave(EmployeeId, StartDate, EndDate, NoOfHalfDay);
        }
    } 
});

For example I have 3 data which means I got 6 check boxes inside my JQgrid 3 for AM and 3 for PM. What i want to achieve is if i check the row 0(First row) AM check box it will check, then If i check the PM check box with the same row the PM checkbox must be uncheck. I try to use this code

if ($('.cbox_leave_half').is(':checked))
  {  $('.cbox_leave_halfPM').attr("checked",false); }

But this code return all the PM check box will uncheck. What I want is to uncheck the AM/PM with the same row.

I'm using jquery <= 1.8.2 version. I know this is so old but I don't know if I switch to higher version of jquery what will happen to my project.

`$('.cbox_leave_half').is('checked)` is incorrect. It should be `$('.cbox_leave_half').is(':checked)` — vijayP, Aug 10 '16 at 03:29

vijayP · Accepted Answer · 2016-08-10T03:46:44.927

0

Could you please try with below code:

Its part of your above code

$('.cbox_leave_half').live('click', function (e) {
    var tr = $(e.target).closest('tr');        
    var target = $(e.target).is(':checked');

    if ($(this).is(':checked))
    {  
        $(tr).find('.cbox_leave_halfPM').attr("checked",false); 
    }

    ...
    ...

Here on click of .cbox_leave_half we are searching for associated .cbox_leave_halfPM present in same row i.e. tr element. I hope this will hep you a bit.

edited Aug 10 '16 at 03:46

answered Aug 10 '16 at 03:34

vijayP

11,432
5
25
40

if i use `.prop` i got this error `Uncaught TypeError: $(...).prop is not a function` – Aug 10 '16 at 03:36
oh...I think you are on lower jQuery version. – vijayP Aug 10 '16 at 03:37
Yes sorry i forgot to mention it on my post. I updated it now. – Aug 10 '16 at 03:39
Thanks you save my life. +1 – Aug 10 '16 at 05:37
@sorry i just notice that this answer has been edited – Aug 10 '16 at 05:38
Can you participate again ? I will create another thread now?. – Aug 10 '16 at 06:46
oh...sorry @Yure. Please share your another problem. – vijayP Aug 10 '16 at 06:50
another thread or I will comment here? or I just edit this thread? – Aug 10 '16 at 06:51
create another thread/question so that more people will join us. thanks. ping me new question link here in comment. – vijayP Aug 10 '16 at 06:53
[here](http://stackoverflow.com/questions/38866763/how-to-determined-if-the-closest-tr-has-a-valuecheck) vijayP – Aug 10 '16 at 07:25

Check Uncheck , check boxes inside a jqgrid or toggle

1 Answers1