2

我目前有下表：

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 的函数，但不确定从哪里开始和构建。

4

4 回答 4

1

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

演示

$('#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; }
于 2012-04-17T22:06:47.673 回答
1

这是一个示例 jQuery 函数，它应该在旧版本的 IE (8/7/6) 中工作：

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

于 2012-04-17T22:16:18.053 回答
1

这是一个冗长且稍微复杂的选项：

$('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 小提琴演示。

参考：

于 2012-04-17T22:31:22.093 回答
0

生成表格时，向 html 单元格添加一个属性，例如

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

使用 jquery 时尝试

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

这很简单

于 2012-04-17T21:39:12.640 回答