Verhinderung Kontrollkästchen wird deaktiviert, wenn Sie auf trigger auf das parent-element

Irgendwie ein komisches problem hier.

Ich will das Kontrollkästchen, wenn das übergeordnete div-Element aktiviert ist, aber es ist DESELEKTIEREN Sie die checkbox, wenn die CHECKBOX angeklickt 😉

Es funktioniert, wenn der name angeklickt wird. Wie kann ich dieses Problem lösen?

//layout
<div class="parent">
   <input type="checkbox"/> <a>Name</a>
</div>

//check the box when parent div is clicked
$(".parent").click(function(event){
   event.preventDefault();
   checkbox=$(this).find("input:checkbox");
   checkbox.attr("checked","checked");
});
InformationsquelleAutor ming yeow | 2011-02-21
  1. 9

    Versuchen.

    <div class="parent">
   <input type="checkbox" class="check"/> <a>Name</a>
</div>

$(".parent").click(function(event){
    $(".check:not(:checked)").attr('checked','checked');
});
$(".check").click(function(event){
   event.stopPropagation();
});

    jsFiddle ist hier

    • dies funktioniert nicht (mehr?), verwenden event.preventDefault(); statt event.stopPropagation();
    InformationsquelleAutor naveen
  2. 1

    Versuchen Sie, hinzufügen:

    event.stopPropagation();
return false;

    zu Ihrem event-handler.

    So, dein code sieht wie folgt aus:

    //layout
<div class="parent">
   <input type="checkbox"/> <a>Name</a>
</div>

//check the box when parent div is clicked
$(".parent").click(function(event){
   event.stopPropagation();
   event.preventDefault();

   checkbox=$(this).find("input:checkbox");
   checkbox.attr("checked","checked");

   return false;
});

    ...

    Dokumentation für event.stopPropagation():

    http://api.jquery.com/event.stopPropagation/

    InformationsquelleAutor Meligy
  3. 1

    Ich habe es nicht ausprobiert, aber ich vermute, Sie können verhindern, dass die Eltern die Aktion aus läuft durch die Verhinderung der Veranstaltung von sprudelnden etwa so:

    $(".parent input:checkbox").click(function(event) {
  event.stopPropagation();
});

    Alternativ können Sie nur setzen Sie Ihre click-handler auf die <a>Name</a> element oder verwenden Sie eine <label> - element ohne JS (das ist genau das, was <label> ist für).

    InformationsquelleAutor Sophie Alpert
Schreibe einen Kommentar