Question

我有一个包含事件选择的表单，这些是无线电选项，其值包含日期和时间，如下所示：

星期四10月31日|下午1:00 - 3:15

问题是有几个事件在时间上重叠，并且不允许完成表单的用户选择重叠时间。我需要完成的是当时间重叠发生时，所有选项都与红色背景相互冲突。我一直在尝试jQuery，但无法提出解决方案。到目前为止，我有这个：

所有广播选项都有.time类

$(document).ready(function() {
    var map = {};
    $(".time").change(function() {
        var value = $(this).val();
        map[$(this).attr('name')] = value;
        $(".time").each(function() {
            if ($(this).is(':checked')) {
                time = $(this).val();
                tr = $(this).closest('tr');
                $.each(map, function(key, val) {
                    if (val == time) {
                        tr.addClass('red');
                    } else {
                        tr.removeClass('red');
                    }
                });
            }
        });
    });
});

上述方法并不像我想要的那样有效，事实上它根本无法正常工作。如果有人可以发光，我会非常感激。

Answer 1

我相信这就是你想要的

<script type="text/javascript">
    $(".time").change(function() {
        var values = $("input.time").map(function(){
            return $(this).val();
        });
        values.each( function (){
            var overlapping = $("input.time[value='"+ this +"']");
            if (overlapping.filter(":checked").length > 1){                            
                overlapping.parents("tr").addClass("red");}
            else{
                overlapping.parents("tr").removeClass("red");
            }
        })
    });
</script>

它首先映射所有单选按钮值，然后根据每个值的检查计数添加/删除相应的红色类。

http://jsfiddle.net/4rJTR/

防止重叠时间选择中的无线电选择

1 个答案: