选中取消选中,选中jqgrid内的复选框或切换

时间:2016-08-10 03:06:46

标签: javascript jquery jqgrid

我的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;
}

这个是单击复选框名称(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);
        }
    } 
});

例如,我有3个数据,这意味着我在JQgrid 3 for AM and 3 for PM中有6个复选框。我想要实现的是,如果我检查行0 (First row) AM复选框,它将检查,然后如果我选中具有相同行的PM复选框,则必须取消选中PM复选框。我尝试使用此代码

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

但是此代码返回所有PM复选框将取消选中。我想要的是取消选中同一行的AM/PM

我正在使用jquery <= 1.8.2版本。我知道这已经太老了但是我不知道我是否会切换到更高版本的jquery我的项目会发生什么。

1 个答案:

答案 0 :(得分:0)

请尝试使用以下代码:

它是上述代码的一部分

click

此处.cbox_leave_half的{​​{1}}我们正在搜索同一行中存在的相关.cbox_leave_halfPM,即tr元素。我希望这会让你有所帮助。