javascript - 根据值重复选择复选框

Question

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

这一切都很棒。然而它有点不完整，最后一 block 拼图让我望而却步。根据定义，禁用行上的复选框是禁用的。但是，如果所有与禁用的复选框具有相同值的复选框也被禁用，那将是完美的。这是为了防止用户选择不兼容的项目(还有一种服务器端措施可以防止这种情况发生，但客户端更加美观和用户友好)。

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');;

    }

});

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

Answer 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