Jquery, deseleziona la casella di controllo solo se altre due caselle di controllo sono deselezionate: javascript, jquery, casella di controllo

Nel mio sito web, l'utente può creare "contattocategorie "," categorie di articoli "e può decidere quale categoria di contatto è associata a quali categorie di articoli. È possibile associare più categorie di articoli a una categoria di contatto e viceversa.

https://jsfiddle.net/vuuxn5gf/

Ecco il codice HTML.

<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

e il 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 questo esempio, la categoria di contatto 1 è associata alla categoria di articolo a & b, la categoria di contatto 2 è associata alla categoria di articolo b e la categoria di contatto 3 con la categoria di articolo a & c.

SITUAZIONE: Un utente aggiunge un nuovo contatto. L'utente inserisce il nuovo contatto nella categoria di contatto 1 e 2. In questo modo, la categoria di articoli a & b viene attivata tramite il codice JQuery.

PROBLEMA: Se l'utente deseleziona la categoria di contatto 1, vengono disattivate entrambe le categorie di articoli a e b. Mentre la categoria di articoli b dovrebbe essere ancora selezionata, perché la categoria di contatti 2 è ancora selezionata.

NOTA A MARGINE: In pratica, non ci saranno solo 3 categorie ciascuna. Ma una scala più ampia, quindi spero che questo possa essere risolto con qualcosa di simile.

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

risposte:

0 per risposta № 1

Un problema che hai con il tuo codice corrente è che l'unico riferimento alla relazione tra le categorie di contatti e le categorie di articoli è all'interno di ciascuna funzione che gestisce gli eventi di modifica.

Con questo metodo non è possibile per la categoria di contatto 1 verificare che esista un collegamento tra la categoria di contatto 2 e la categoria di elemento b.

Dovrai creare una variabile per mantenere queste relazioni, quindi all'interno di ogni evento di modifica verificare la presenza di altre relazioni che potrebbero influire sulla modifica o meno della categoria dell'elemento.

Ho modificato il tuo violino qui: https://jsfiddle.net/vuuxn5gf/3/

In cui ho creato una matrice per tenere il rapporto tra le diverse categorie. Questo è solo un esempio, potresti invece fare in modo che la matrice vada dall'altra parte, ma è così che l'ho definita:

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

e poi ho creato una funzione per gestire il contattoeventi di cambio di categoria e per ognuno passare attraverso le caselle di categoria degli articoli e per ognuno di questi eseguire i controlli sulla matrice per gestire se sono spuntate altre categorie di contatti.

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

Ammetto che questo non è il più pulito, ma spero che trasmetta l'idea di cui avrai bisogno per la tua soluzione.

---

0 per risposta № 2

Ho aggiornato i tuoi ID per renderli unici e ho aggiunto un filefunzione "redoit" per riapplicare lo stato selezionato dopo aver deselezionato, ad esempio deseleziona cb1 mentre cb2 è selezionato. Mi sono anche sbarazzato dei vars per brevità. Spero che questo aiuti!

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

---