Question

我目前有下表：

Checkbox (ID)  |  Training Course Code  |  Training Course Name  |  ....
   [ ]         |  DE00155115-1          |  H&S Exec 1            |  ....
   [ ]         |  DE00155115-1          |  H&S Exec 1            |  ....
   [ ]         |  DE00074454-2          |  H&S Exec 2            |  ....

每门课程不止一次，但只能选择一次，因此每门课程代码有多个ID。

我想要做的是能够在选择一个行后禁用/突出显示重复的行。

在上面的示例中，如果选择了第一行，则第二行将禁用，反之亦然。如果选择了第三行，则不会发生任何事情。

我尝试过几个使用jQuery的函数，但不确定从哪里开始构建。

Answer 1

如果我理解正确，那么您需要为下面的复选框实现点击处理程序，

DEMO

$('#courses > tbody > tr > td > .selectCourse').on('click', function () {
    var $tr = $(this).closest('tr')
    var selCourseCode = $tr.find('td:eq(1)').html();
    var isChecked = this.checked;
    if (isChecked) {
        $tr.addClass('highlight');
    } else {
        $tr.removeClass('highlight');
    }

    $.each ($tr.siblings(), function () {
        var courseCode = $(this).find('td:eq(1)').html();
        if (courseCode == selCourseCode) {
            if (isChecked) {
                $(this).find('.selectCourse').prop('disabled', true);
                $(this).addClass('disable');
            } else {
                $(this).find('.selectCourse').removeProp('disabled');
                $(this).removeClass('disable');
            }
        }
    });
});

<强> CSS：

.highlight { background-color: #386C98; }
.disable { background-color: #386C98; color: grey; }

Answer 2

以下是一个示例jQuery函数，该函数应该适用于旧版本的IE（8/7/6）：

http://jsfiddle.net/lazerblade01/d2QtL/9/

Answer 3

这是一个很长的，稍微涉及的选项：

$('table')
    .on('click','input:checkbox',
        function(){
            var that = $(this),
                thatRow = that.closest('tr'),
                id = that.parent().next('td').text();

            if (that.is(':checked')){
                that
                    .closest('tbody')
                    .find('tr td:nth-child(2)')
                    .each(
                        function(){
                            if ($(this).text() == id){
                                $(this)
                                    .closest('tr')
                                    .not(thatRow)
                                    .addClass('disabled')
                                    .find('input:checkbox')
                                    .prop('disabled',true);
                            }
                        });
            }
            else {
                that
                    .closest('tbody')
                    .find('tr td:nth-child(2)')
                    .each(
                        function(){
                            if ($(this).text() == id){
                                $(this)
                                    .closest('tr')
                                    .not(thatRow)
                                    .removeClass('disabled')
                                    .find('input:checkbox')
                                    .prop('disabled',false);
                            }
                        });
            }
        });

JS Fiddle demo

参考文献：

Answer 4

生成表格时，将属性添加到html单元格，如

 <td data-course-name="math">math</td>

使用jquery时尝试

 $('td[data-course-name=' + name of the course + ']').css( apply css here)

很简单

如果单元格重复，则突出显示表行

4 个答案: