Utilizzare JQuery per selezionare una casella di controllo in un elemento di elenco padre?

Question

Sono nuovo di zecca per Javascript e JQuery, quindi ho letto su di esso e sto cercando di verificare (e impostare inattivo) una casella di controllo in un elemento di elenco padre quando uno dei bambini è selezionato.

Se questo non ha senso, dai un'occhiata alla struttura dell'elenco.

<ul> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 1</li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 2 
     <ul> 
      <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li> 
      <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li> 
     </ul> 
    </li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 3</li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 4</li> 
</ul> 

Se Child 1 o Child 2 è selezionato, voglio che l'input in Parent 2 sia selezionato e impostato inattivo. Ho iniziato a lavorare su di esso, ma sono bloccato qui:

$(function(){ 
    $('.child').click(function() { 
     $(this).parent().parent().parent().toggle(); 
    }); 
}); 

Come potete vedere, non ho fatto in lungo. Qualsiasi aiuto sarebbe apprezzato.

Grazie!

Answer 1

Prova questa:

<script type="text/javascript"> 
$(function(){ 
    $('li ul input[type=checkbox]').click(function() { 
       var that = $(this); 
       var parentUL = that.parent().parent(); 
     var parentChk = parentUL.parent().find("input:first"); 
       var oneChecked = false; 
       parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;}); 
       console.log(oneChecked); 
       parentChk.attr("checked", oneChecked); 
    }); 
}); 
</script> 

Answer 2

il metodo .parent() restituisce solo l'elemento DOM padre diretto del selettore corrente. Il metodo .parents() cercherà l'albero DOM per trovare gli elementi genitore che corrispondono alla selezione. Quindi $ (". Bar"). Parents (". Foo") selezionerebbe per tutti gli elementi genitore con la classe "pippo" di qualsiasi elemento con classe "barra".

Prima attribuisci all'elemento padre di destinazione un attributo identificabile, una classe o un ID. Se avessi a che fare con gli ID, non avresti bisogno dei genitori(), quindi usa una classe.

$(".child").click(function(){ 
    $(this).parents('.parentclass').toggle(); 
}); 

Answer 3

Sulla base della sua marcatura postato, questo funzionerà:

$('ul > li ul li > :checkbox').change(function() { 
    $(this).parents('li:last') 
      .children("input") 
      .attr("disabled", this.checked); 
}); 

Si noti inoltre:

• Hai numerica e duplicare gli ID, che sono invalid.
• Non hai alcuna classe denominata "child" nel tuo documento.
• .toggle "visualizza o nasconde gli elementi corrispondenti". Lo standard non attiva la proprietà 'disabilitata'.

Provalo qui: http://jsfiddle.net/karim79/QfTfr/

Answer 4

Scegli questa fillde

$("input:checkbox + ul input:checkbox").click(function(){ 
    var $ul = $(this).closest("ul"); 
    var $parent = $ul.prev("input:checkbox"); 
    if($ul.find("input:checkbox:checked").length > 0){ 
     $parent.attr("checked", "checked"); 
    }else{ 
     $parent.attr("checked", ""); 
    } 
}) 

Se si utilizza la proprietà id per gli elementi, si deve fare sicuro che abbia un valore univoco nel documento.