选中 Uncheck ， jqgrid 内的复选框或切换

Question

我的 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，我的项目会发生什么。

Answer 1

你可以试试下面的代码吗：

上面代码的一部分

$('.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); 
    }

    ...
    ...

在click 的.cbox_leave_half 上，我们正在搜索存在于同一行中的关联.cbox_leave_halfPM，即tr 元素。我希望这会对你有所帮助。