lundi 29 octobre 2018

Check checkbox on clicking a div, but not on an image

I would like a checkbox to be checked on clicking anywhere on a parent div, but not if the user click on the camera image included in that div. How to "exclude" that div ?

HTML

<label for="checkbox_296501" class="label-for-check">
   <div class="colorChange">
      <div>
         Title          
         <div style="float: right">
            <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/" >
         </div>
      </div>

      <div style="float: left; padding: 6px 6px 0 0">
         <img class="photo_dispo" src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
      </div>

      <p style="clear: both; margin-bottom: 0">
         Pellentesque sit amet placerat magna. Vestibulum diam quam, vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor risus, varius interdum ornare non, sagittis eu neque. Nunc vulputate nunc lorem, at rhoncus nisi eleifend a.
      </p>

      <div>
         <div>
            Left column
         </div>
         <div style="float: right">
            Right column
         </div>
      </div>
   </div>
</label>

Javascript

jQuery(function($) {
   $("input:checkbox").on("change", function() {
      $(this).closest(".colorChange").toggleClass("checked_bg", $(this).prop("checked"));
   });
});

Working example http://jsfiddle.net/uw7gk03p/1/




Aucun commentaire:

Enregistrer un commentaire