vendredi 2 juin 2017

How to click cloned label and change checkbox checked property to false & click checkbox and remove clone

I have a search filter that I need to revamp. What should happen is that when you click the filters (checkboxes and radio buttons) a clone of the corresponding label gets output in a header section. Then when the checkbox or radio button is clicked again the label should disappear. The same goes for the clone label. When this is deleted the checkbox should have its property changed to unchecked.

Two complications. 1) any solution must use jQuey 1.7 2) AJAX is being used on the page. To get around weirdness (e.g. slideToggle firing immediately again after initial open ) I am using .one() but this causes the clone to be created only once.

So I have two issues. How do I delete the checked property on the checkbox when the clone is clicked and vise Versa

EXAMPLE of below code in action

$("section label").one("click", function() {

  var clonedContent = $(this)
    .first()
    .clone()
    .children()
    .end()
    .addClass("clone");
    $("header").append(clonedContent).addClass("clone");
});

$("header").on("click", ".clone", function() {
  var forAttr = $(this).attr("for");
  console.log(forAttr);
  // $(this).parents(".wrap").find(forAttr).removeClass("is-checked").siblings('input').prop('checked',false);
  $(this)
    .remove()
    .parents(".wrap")
    .find("section label")
    .removeClass("is-checked");
});

$("section label").click(function() {
  $(this).toggleClass("is-checked");
});




Aucun commentaire:

Enregistrer un commentaire