根据值重复选择复选框

Question

Using Jquery I have code that works to select all the checkboxes of the same value as the checkboxes that is selected. It also disables all checkboxes on the same row as the checkbox that is selected (the checkboxes are within a table).

This is all great. However it is slightly incomplete, and the last piece of the puzzle is eluding me. Checkboxes on the rows that are disabled are, by definition, disabled. However, it would be perfect if all checkboxes with the same value as those disabled were also disabled. This is to prevent users from selecting incompatible items (there's also a server side measure to prevent this, but client side is so much more pretty and user-friendly).

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

    }

});

The intended functionality would, for instance, disable both checkboxes related to 30680 on the jsfiddle link if any checkbox related to 20040 is checked.

Answer 1

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

The above code will find all checkboxes on the same row and disable all of them. I recommend looping through these checkboxes, disabling them and in addition, selecting all other checkboxes having the same values and disabling them. You can do so by replacing the above code with the one below:

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

You will have to a similar thing for removing the the disabled attribute.

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

Demo

Answer 2

Check updated fiddle here jsfiddle.net/bharatsing/q9q7h1y8/2/

Added some code in your fiddle code:

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

Answer 3

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

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