jQuery，仅在未选中其他两个复选框的情况下才取消选中复选框

Question

In my website, the user can create 'contact categories','item categories' and can decide which contact category is associated with which item categories. Multiple item categories can be associated with a contact category and vise versa.

https://jsfiddle.net/vuuxn5gf/

Here is the HTML code.

<h1>
  New Contact
</h1>

<input type="checkbox" value="1" id="user_name">Contact category 1<br>
<input type="checkbox" value="2" id="user_name">Contact category 2<br>
<input type="checkbox" value="3" id="user_name">Contact category 3<br><br>

<input type="checkbox" value="a" id="user_name">Item category a<br>
<input type="checkbox" value="b" id="user_name">Item category b<br>
<input type="checkbox" value="c" id="user_name">Item category c

and the JQuery

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");

var chka = $("input[type='checkbox'][value='a']");
var chkb = $("input[type='checkbox'][value='b']");
var chkc = $("input[type='checkbox'][value='c']");

chk1.on('change', function() {
  chka.prop('checked', this.checked);
  chkb.prop('checked', this.checked);
});

chk2.on('change', function() {
  chkb.prop('checked', this.checked);
});

chk3.on('change', function() {
  chka.prop('checked', this.checked);
  chkc.prop('checked', this.checked);
});

In this example contact category 1 is associated to item category a & b, contact category 2 is associated to item category b and contact category 3 with item category a & c.

SITUATION: A user adds a new contact. The user places the new contact to contact category 1 & 2. That way, Item category a & b get's activated through the JQuery code.

PROBLEM: If the user unchecks contact category 1, both item category a & b get's deactivated. While item category b should still be checked, because contact category 2 is still checked.

SIDENOTE: In practice, this won't be just 3 categories each. But a larger scale, so I hope this can be solved with something like.

chk1.on('checked', function() {
  chka++;
  chkb++;
if (chka > 0) chka.prop('change', this.checked);
});

chk1.on('unchecked', function() {
  chka--;
  chkb--;
if (chka > 0) chka.prop('change', this.checked);
});

Answer 1

One issue you have with your current code is that the only reference to the relationship between the contact categories and the item categories is within each function that handles the change events.

With this method there is no way for contact category 1 to check that there is a link between contact category 2 and item category b.

You'll want to create some variable to hold these relationships, and then within each change event check for other relationships that might affect whether the item category should be changed or not.

I modified your fiddle here: https://jsfiddle.net/vuuxn5gf/3/

In which I made a matrix to hold the relationship between the different categories. This is just an example, you could have the matrix going the other way instead, but this is how I defined it:

var icats = [];
icats['a'] = ['1','3'];
icats['b'] = ['1','2'];
icats['c'] = ['3'];

and then I made a function to handle the contact category change events and for each one go through the item category checkboxes and for each of those perform the checks on the matrix to handle if other contact categories are checked.

$("#contact-cats input:checkbox").on('change', function(){
  var idx = $(this).val();
  $("#item-cats input:checkbox").each(function(){
    var itm = $(this).val();
    var arr = icats[itm];
    var skipChange = false;
    var makeChange = false;
    for(var i=0;i<arr.length;i++){
      if(arr[i] != idx){
         skipChange = $("#contact-cats input:checkbox[value="+arr[i]+"]").prop("checked");
      }else{
         makeChange = true;
      }
    }
    if(makeChange && !skipChange){
      $(this).prop("checked", !$(this).prop("checked"));
    }
  });
});

I admit this isn't the cleanest, but I hope it gets across the idea you'll need for your own solution.

Answer 2

I updated your ids to be unique and added a 'redoit' function to reapply the checked status after you uncheck, for example uncheck cb1 while cb2 is checked. I also got rid of the vars for brevity. I hope this helps!

HTML:

<h1>
New Contact
</h1>

<input type="checkbox" value="1" id="cb1">Contact category 1
<br>
<input type="checkbox" value="2" id="cb2">Contact category 2
<br>
<input type="checkbox" value="3" id="cb3">Contact category 3
<br>
<br>

<input type="checkbox" value="a" id="cba">Item category a
<br>
<input type="checkbox" value="b" id="cbb">Item category b
<br>
<input type="checkbox" value="c" id="cbc">Item category c

jQuery:

$("#cb1").on('change', function() {
  $("#cba").prop('checked', this.checked);
  $("#cbb").prop('checked', this.checked);
  redoit();
});

$("#cb2").on('change', function() {
  $("#cbb").prop('checked', this.checked);
  redoit();
});

$("#cb3").on('change', function() {
  $("#cba").prop('checked', this.checked);
  $("#cbc").prop('checked', this.checked);
  redoit();
});

function redoit() {
  if ($("#cb1").is(':checked')) {
    $("#cba").prop('checked', true);
    $("#cbb").prop('checked', true);
  }
  if ($("#cb2").is(':checked')) {
    $("#cbb").prop('checked', true);
  }
  if ($("#cb3").is(':checked')) {
      $("#cba").prop('checked', true);
    $("#cbc").prop('checked', true);
  }
};