根据值重复选择复选框

时间:2016-12-30 12:27:12

标签: javascript jquery html checkbox

使用Jquery我有一些代码可以选择与所选复选框相同值的所有复选框。它还会禁用与所选复选框位于同一行的所有复选框(复选框位于表格中)。

这一切都很棒。然而它稍微不完整,最后一块拼图正在躲避我。根据定义,禁用的行上的复选框是禁用的。但是,如果所有与禁用值相同的复选框也被禁用,那将是完美的。这是为了防止用户选择不兼容的项目(还有一个服务器端措施来防止这种情况,但客户端更漂亮,用户友好)。

JSFiddle:https://jsfiddle.net/q9q7h1y8/

$(".chkbox").on('change', function() {

    var currentObj = $(this);
    var val = $(this).val();
    if ($(this).is(":checked")) {

        $(":checkbox[value='" + val + "']").prop("checked", true);
        $(this)
            .closest("tr")
            .find(".chkbox").attr("disabled", "disabled");
        $(currentObj).removeAttr("disabled");
        $(":checkbox[value='" + val + "']")
            .closest("tr")
            .find(".chkbox").attr("disabled", "disabled");
        $(":checkbox[value='" + val + "']").removeAttr("disabled");
    } else {
        $(":checkbox[value='" + val + "']").prop("checked", false);
        $(":checkbox[value='" + val + "']")
            .closest("tr")
            .find(".chkbox").removeAttr('disabled');;

    }

});

例如,如果选中与20040相关的任何复选框,则预期的功能将禁用jsfiddle link上与30680相关的复选框。

3 个答案:

答案 0 :(得分:1)

$(":checkbox[value='" + val + "']")
        .closest("tr")
        .find(".chkbox").attr("disabled", "disabled");

上面的代码会在同一行找到所有复选框并禁用所有复选框。我建议循环使用这些复选框,禁用它们,此外,选择具有相同值的所有其他复选框并禁用它们。你可以用上面的代码替换上面的代码:

$(":checkbox[value='" + val + "']")
  .closest("tr").find(".chkbox").each(function(){
    var $this = $(this);
    $this.attr('disabled', 'disabled');
    $(":checkbox[value='" + $this.val() + "']").attr('disabled', 'disabled');
});

删除已禁用的属性需要类似的事情。

$(":checkbox[value='" + val + "']")
  .closest("tr").find(".chkbox").each(function(){
    var $this = $(this);
    $this.removeAttr('disabled');
    $(":checkbox[value='" + $this.val() + "']").removeAttr('disabled');
});

Demo

答案 1 :(得分:1)

在此处查看更新的小提琴jsfiddle.net/bharatsing/q9q7h1y8/2/

在您的小提琴代码中添加了一些代码:

$(":checkbox[value='" + val + "']")
                             .closest("tr")
                             .find(".chkbox").each(function(){
                                $(":checkbox[value='" + $(this).val() + "']").attr("disabled", "disabled");
                             });

答案 2 :(得分:1)

每次更改复选框都可以存储其值,然后执行以下操作:

$('* :input[value="value?"]').action();