Jquery, Kontrollkästchen nur deaktivieren, wenn zwei andere Kontrollkästchen deaktiviert sind

Question

Auf meiner Website kann der Benutzer 'Kontaktkategorien', 'Elementkategorien' erstellen und entscheiden, welche Kontaktkategorie welchen Elementkategorien zugeordnet ist. Mehrere Positionskategorien können einer Kontaktkategorie zugeordnet werden und umgekehrt.

https://jsfiddle.net/vuuxn5gf/

Hier ist der 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 

und die 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 diesem Beispiel 1 Kontakt Kategorie Positionstyp zugeordnet ist, eine & b, Kontaktkategorie 2 auf Positionstyp B und Kontaktkategorie zugeordnet 3 mit dem Positionstyp ein & c.

SITUATION: Ein Benutzer fügt einen neuen Kontakt hinzu. Der Benutzer legt den neuen Kontakt in die Kontaktkategorie 1 ein. & 2. Auf diese Weise wird die Elementkategorie & über den JQuery-Code aktiviert.

PROBLEM: Wenn der Benutzer unchecks Kontaktkategorie 1, beide Artikel Kategorie ein & b gets deaktiviert. Während der Positionstyp b noch geprüft werden sollte, weil die Kontaktkategorie 2 noch geprüft wird.

SIDENOTE: In der Praxis wird dies nicht nur 3 Kategorien sein. Aber ein größerer Maßstab, also hoffe ich, dass das mit etwas ähnlichem gelöst werden kann.

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

Ein Problem, das Sie mit Ihrem aktuellen Code haben, ist, dass der einzige Hinweis auf die Beziehung zwischen den Kontaktkategorie und den Positionstypen innerhalb jeder Funktion ist, die die Änderungsereignisse behandelt.

Mit dieser Methode kann Kontakttyp 1 nicht prüfen, ob zwischen Kontaktkategorie 2 und Artikelkategorie b eine Verbindung besteht.

Sie möchten eine Variable erstellen, die diese Beziehungen enthält, und dann innerhalb jeder Änderungsereignisprüfung nach anderen Beziehungen suchen, die sich darauf auswirken könnten, ob die Positionstypen geändert werden sollen oder nicht.

ich modifizierte Ihre Geige hier: https://jsfiddle.net/vuuxn5gf/3/

, in dem ich eine Matrix aus, die die Beziehung zwischen den verschiedenen Kategorien zu halten. Dies ist nur ein Beispiel, könnten Sie die Matrix haben stattdessen in die andere Richtung, aber das ist, wie ich es definiert:

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

und dann habe ich eine Funktion, um die Kontaktkategorie Änderungsereignisse zu handhaben und für jeden unterwegs Über die Kontrollkästchen für die Positionskategorie und für jede von ihnen führen Sie die Überprüfung der Matrix durch, wenn andere Kontaktkategorien geprüft werden.

$("#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")); 
    } 
    }); 
}); 

Ich gebe zu, das ist nicht das sauberste, aber ich hoffe, es kommt über die Idee, die Sie für Ihre eigene Lösung benötigen.

Answer 2

Ich habe Ihre IDs so geändert, dass sie eindeutig sind, und eine 'Redoit'-Funktion hinzugefügt, um den aktivierten Status erneut anzuwenden, nachdem Sie die Markierung entfernt haben, zB cb1 deaktivieren, während cb2 aktiviert ist. Ich habe auch die Vars der Kürze halber losgeworden. Ich hoffe das hilft!

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