Having Issue on Wrapping and Unwrapping Un Selected Checkbox

Having Issue on Wrapping and Unwrapping Un Selected Checkbox


I am trying to wrap each of disabled checkbox elements in a group into a div which enable users to click on the disabled items and be prompted if want to increase the limit or not?

As you can see I tried to wrap the checked elements with `.fake-check-wrap`  and all not checked in `check-wrap-sapn` dives. This is because the jquery unwrap() will remove all first parent of the checkboxes

  1.  $("input:checkbox").unwrap("<span class='check-wrap-sapn'></div>");

now I am totally lost here! 

  1. <div class="container">
  2.     <div class="well">
  3.         <input type="checkbox" />
  4.         <input type="checkbox" />
  5.         <input type="checkbox" />
  6.         <input type="checkbox" />
  7.         <input type="checkbox" />
  8.         <input type="checkbox" />
  9.         <input type="checkbox" />
  10.         <input type="checkbox" />
  11.         <input type="checkbox" />
  12.         <input type="checkbox" />
  13.         <input type="checkbox" />
  14.         <input type="checkbox" />
  15.         <input type="checkbox" />
  16.         <input type="checkbox" />
  17.         <input type="checkbox" />
  18.     </div>
  19. </div>

  1. var limit = 2;
  2. $("input:checkbox").on("change", function () {
  3.     if ($("input:checkbox:checked").length <= limit) {
  4.         var $this = $(this);
  5.         if ($this.is(":checked")) {
  6.             if ($this.parent().is(':not(.fake-check-wrap)')) {
  7.                 $this.wrap("<span class='fake-check-wrap'></div>");
  8.             }
  9.         } else {
  10.             if ($this.parent().is('.fake-check-wrap')) {
  11.                 $this.unwrap("<div class='fake-check-wrap'></div>");
  12.             }
  13.             $("input:checkbox").not(":checked").attr("disabled", false);

  15.         }

  17.     }
  18.     if ($("input:checkbox:checked").length >= limit) {
  19.         $("input:checkbox").not(":checked").attr("disabled", true);
  20.         $("input:checkbox").not(":checked").wrap("<span class='check-wrap-sapn'></div>");
  21.         $("input:checkbox").not(":checked").after("<div class='check-wrap-mask'></div>");
  22.     }

  24. });
can you please help me to gfix this? in a way if user selects 3 items the all other be disabled but the disabled wrap by  check-wrap-sapn'      and if one of 2 selected be unchecked then unwrap  only  check-wrap-sapn' from the unchecked checkboxes